Сепараторы для навигации

Ответ 1

Просто используйте изображение разделителя в качестве фонового изображения на li.

Чтобы он отображался только между элементами списка, расположите изображение слева от li, но не на первом.

Например:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Этот CSS добавляет изображение в каждый элемент списка, который следует за другим элементом списка - другими словами, все из них, кроме первого.

NB. Помните, что смежный селектор (li + li) не работает в IE6, поэтому вам нужно просто добавить фоновое изображение к обычным li (с условной таблицей стилей) и, возможно, применить отрицательный запас к одному из ребер.

Ответ 2

Если нет необходимости использовать изображения для разделителей, вы можете сделать это с помощью чистого CSS.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Это помещает панель между каждым элементом списка, так же, как и изображение в исходном вопросе. Но поскольку мы используем смежные селектора, он не помещает панель перед первым элементом. А поскольку мы используем псевдо-селектор :before, он не помещает его в конец.

Ответ 3

Добавьте разделитель в фон li и убедитесь, что ссылка не раскрывается, чтобы закрыть разделитель, что означает, что разделитель не будет доступен для кликов.

Ответ 4

Вы можете добавить один элемент li, где вы хотите добавить divider

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

В CSS вы можете добавить следующий код.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Это увеличит скорость выполнения, так как не загрузит изображение. просто проверьте это.:)

Ответ 5

Для тех, кто использует Sass, я написал mixin для этой цели:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Пример:

@include addSeparator('li', '|', 1em);

Это даст вам следующее:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Ответ 6

Другое решение в порядке, но нет необходимости добавлять разделитель в крайнем случае, если вы используете: после или в самом начале, если используете: before.

SO:

: после

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

case: before

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Ответ 7

Чтобы получить разделитель по вертикали по отношению к тексту меню,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Ответ 8

Поместите его в качестве фона в элементе списка:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Далее я рекомендую другую разметку для доступности:
Вместо того, чтобы вставлять изображения в строку, помещать текст в текст, окружать каждый с помощью пролета, применять изображение в качестве фона, а затем скрывать текст с дисплеем: none - это дает гораздо более гибкий стиль стилизации и позволяет вам используйте tiling с 1px широким изображением bg, экономит полосу пропускания, и вы можете встроить его в CSS-спрайт, который сохраняет HTTP-вызовы:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE Хорошо, я вижу, что другие получили аналогичный ответ перед мной - и я отмечаю, что Джон также включает в себя средство для того, чтобы разделитель не появлялся перед первым элементом, используя селектор li + li, что означает, что любое li, идущее после другого li,

Ответ 9

Я считаю, что лучшим решением для этого является то, что я использую, и это естественная граница css:

border-right:1px solid;

Возможно, вам придется позаботиться о заполнении, например:

padding-left: 5px;
padding-right: 5px;

Наконец, если вы не хотите, чтобы последняя li имела эту разделительную границу, дайте ей "none" в "border-right" в последнем случае:

li:last-child{
  border-right:none;
}

Удачи:)