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

Question

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

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

Answer 1

Довольно просто, без необходимости «указывать первый элемент». CSS более мощный, чем многие думают (например, first-child:before великолепен!). Но это, безусловно, самый чистый и правильный способ сделать это, по крайней мере, на мой взгляд.

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

Теперь просто используйте простой неупорядоченный список в HTML, и он заполнит его для вас. HTML должен выглядеть так:

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

Результат будет примерно таким:

ГЛАВНАЯ | О НАС | Поддержка

Теперь вы можете расширяться до бесконечности и вам больше не нужно беспокоиться о порядке, смене ссылок или вашей первой записи. Все автоматизировано и прекрасно работает!

Answer 2

попробуйте это, ищущий:

li+li { border-left: 1px solid #000000 }

это повлияет только на элементы lijecent li

найдено здесь

Answer 3

Это также можно сделать с помощью CSS: псевдоклассы. Поддержка не такая широкая, и ответ выше дает тот же результат, но это чистый CSS-y =)

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

OR

.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

Answer 4

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

Даже если вы генерируете <li> программно, присвоение класса first должно быть простым.

Answer 5

Более простым решением было бы просто добавить #navigation ul li~li { border-left: 1px solid #857D7A; }

Answer 6

.last { border-right: none

.last { border-right: none !important; }

Answer 7

Это прекрасно работает для меня:

Примечание: я использую BEM / OCSS Синтаксис SCSS

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}

Answer 8

Я делаю это, как говорит Пекка. Поместите встроенный стиль на каждый <li>:

style="border-right: solid 1px #555; border-left: solid 1px #111;"

Снимите первый и последний в зависимости от ситуации.