Вертикальные делители в горизонтальном меню УЛ.

Я пытаюсь создать горизонтальную панель навигации (не выпадающий, просто горизонтальный список), но я испытываю затруднения при нахождении лучшего способа добавить вертикальные делители между пунктами меню.

Фактический 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 свойство, но изображение не обнаружилось. Я также попытался установить делитель как фон, который на самом деле более или менее работал за исключением того, что он заставил первый объект иметь делитель перед ним.

65
задан htoip 3 July 2012 в 21:52
поделиться

3 ответа

Думаю, ваш лучший снимок - это свойство border-left , которое назначается каждому из li , кроме первого. (Вам нужно будет присвоить первому классу с именем first и явно удалить для этого границу).

2
ответ дан 24 November 2019 в 15:20
поделиться

Это также может быть сделано через 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

11
ответ дан 24 November 2019 в 15:20
поделиться
.last { border-right: none

.last { border-right: none !important; }
1
ответ дан 24 November 2019 в 15:20
поделиться