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

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

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

Ответ 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 -->

Результат будет таким:

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

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

Ответ 2

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

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

это затронет только связанные элементы li

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

Ответ 3

Это также можно сделать с помощью 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

Ответ 4

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

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

Ответ 5

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

Ответ 6

.last { border-right: none

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

Ответ 7

Это отлично работает для меня:

NB Я использую синтаксис SCSS ~~BEM/OCSS~~

#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;
        }

      }
  }
}

Ответ 8

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

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

Снимите первый и последний, если необходимо.