Я пытаюсь создать горизонтальную панель навигации (не выпадающий, просто горизонтальный список), но я испытываю затруднения при нахождении лучшего способа добавить вертикальные делители между пунктами меню.
Фактический HTML следующие:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Текущий CSS следующие:
.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}
Между каждым пунктом меню я хочу маленькое изображение как вертикальный делитель, за исключением того, что я не хочу делитель, показанный перед первым объектом, и я не хочу делитель, показанный после второго объекта.
Конечный результат должен выглядеть примерно так:
Объект 1 | объект 2 | объект 3 | объект 4 | объект 5
Просто заменив канал действительным образом.
Я попробовал различные пути - я попытался установить list-style-image
свойство, но изображение не обнаружилось. Я также попытался установить делитель как фон, который на самом деле более или менее работал за исключением того, что он заставил первый объект иметь делитель перед ним.
Думаю, ваш лучший снимок - это свойство border-left
, которое назначается каждому из li
, кроме первого. (Вам нужно будет присвоить первому классу с именем first
и явно удалить для этого границу).
Это также может быть сделано через CSS:псевдо-классы. Поддержка не так широка и ответ, приведенный выше, дает тот же результат, но в чистом виде CSS-y =)
.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }
ИЛИ:
.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }
Смотрите: http://www.quirksmode.org/css/firstchild.html
Или: http://www.w3schools.com/cssref/sel_firstchild.asp
.last { border-right: none
.last { border-right: none !important; }