Мне нужно создать навигационную панель с символом «|» между каждой ссылкой. Я попытался с помощьюДобавление символа после каждого элемента в CSS
.navbar li::after { position:absolute; content:" | "; }
Но я всегда в конечном итоге получить первый символ по ссылке, я не знаю, почему.
Я также попытался с помощью пограничного права и границы-влево, но это выглядит очень некрасиво и дает мне 2 строки для каждого элемента.
вот как я обычно делаю это здание на вашем граничном правом решении: fiddle
HTML:
включает пролет применить границу, поскольку это означает, что границы будет поддерживать высоту текста. Если вы хотите добавить прописку в список, примените горизонтальную прокладку к li и вертикальной прокладке к пролету.
<ul>
<li><span>Link 1</span></li>
<li><span>Link 2</span></li>
<li><span>Link 3</span></li>
</ul>
вы можете использовать: первый ребенок, чтобы удалить границу, которая должна работать весь путь обратно к IE8
CSS:
ul{
padding:0px;
margin:0px;
}
li {
list-style:none;
display:inline-block;
padding:10px 0px;
}
span {
padding:0px 10px;
border-left:1px solid red;
display:inline-block;
}
li:first-child span {
border-left:none;
}
Я полностью согласен с методом Кристофера Томасом , это на самом деле довольно умно. Я думал о другом потенциальном способе, которым вы могли бы это сделать.
Поместите ссылки в три отдельных абзаца и сделайте два divs, которые будут линиями. Затем вы можете отформатировать их отдельно, чтобы они выглядели как линии.
Линии не вписаны вертикально, но это лучшее, что я могу сделать за пять минут.
div {
background: #fe89d7;
width: 1px;
height: 15px;
display: inline-block;
}
p {
display: inline-block;
padding: 15px;
} <body>
<p>Link 1</p>
<div></div>
<p>Link 2</p>
<div></div>
<p>Link 3</p>
</body>
Он прекрасно смотрится на моем компе. Я бы отключил положение абсолютным. Можете ли вы предоставить ссылку, где мы можем помочь вам устранить вашу проблему? – Vcasso
Не совсем, это может выглядеть нормально на вашем ПК, потому что у меня есть логотип на левой стороне навигатора, я не знаю, если это имеет значение, хотя –
Предполагаю, что вы получаете 2 строки, потому что вы используете border-right AND border-left? Может быть, просто используйте один из них? – Flink