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


html css markup
person Michael L    schedule 20.12.2009    source источник

Ответы (7)


arrow_upward
112
arrow_downward

Довольно и просто, без «необходимости указывать первый элемент». 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 -->

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

ГЛАВНАЯ | О НАС | СЛУЖБА ПОДДЕРЖКИ

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

person David Cahill    schedule 15.06.2012
comment
Вы, сэр, великолепны. Этот метод мне очень понравился. Поскольку все это делается в CSS, мне будет очень просто внести изменения. - person ArtisanSamosa; 28.12.2012
comment
Вы рассматривали :not(:first-child):before - person automaticAllDramatic; 13.04.2013
comment
Обратите внимание, что последние два правила можно объединить в одно: #navigation li + li:before { content: " | "; } - person rinogo; 01.09.2015

arrow_upward
28
arrow_downward

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

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

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

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

person vladkras    schedule 05.01.2013
comment
Это просто круто! - person frazras; 10.11.2017

arrow_upward
12
arrow_downward

Это также можно сделать с помощью псевдоклассов 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 < br> Или: http://www.w3schools.com/cssref/sel_firstchild.asp

person Campbeln    schedule 21.12.2009

arrow_upward
2
arrow_downward

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

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

person Pekka    schedule 20.12.2009
comment
Можно даже безопасно полагаться на селекторы CSS 2.1 и использовать ul > li:first-child для таргетинга на этот первый элемент без добавления любая дополнительная разметка. - person Wex; 14.09.2011
comment
Просто также отметив, что он попросил разделитель изображения, а не боковую границу, но, по сути, та же идея (предоставление фонового изображения для <li>) - person Wex; 14.09.2011

arrow_upward
2
arrow_downward

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

person newbie    schedule 16.09.2014

arrow_upward
0
arrow_downward

У меня это отлично работает:

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

      }
  }
}
person Satu    schedule 27.11.2017

arrow_upward
-2
arrow_downward

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

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

Взлетайте первым и последним по мере необходимости.

person Martin    schedule 15.08.2012