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

61
css html markup

8 ответов

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

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

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

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

99

попробуйте это, искатель:

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

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

нашел здесь

25

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

12

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

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

3

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

2
.last { border-right: none

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

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

NB я использую 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;
        }

      }
  }
}
0

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

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

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

-2