Разделители для навигации

Мне нужно добавить разделители между элементами навигации. Разделители - это изображения.

Моя HTML структура как: ol > li > a > img.

Здесь я подхожу к двум возможным решениям:

1. Чтобы добавить больше liтегов для разделения (бу!),
2. Включите разделитель в изображение каждого элемента (это лучше, но это дает возможность, что пользователь может щелкнуть, например, «Домашняя страница», но попасть в «Службы», потому что они расположены один за другим, и пользователь может случайно щелкнуть разделитель, который принадлежит «Сервисам»);

Что делать?

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

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

Например:

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

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

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

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

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

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

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

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

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

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

ТАК:

случай: после

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

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

случай: до

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

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

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

.menustyle li + li:before

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

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

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

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

Пример:

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

Что даст вам это:

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

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

border-right:1px solid;

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

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

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

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

Удачи :)

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

<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 */

Затем я рекомендую другую разметку для доступности:
вместо того, чтобы встраивать изображения в строку, поместите текст в виде текста, окружите каждое диапазоном, примените изображение в качестве фона, а затем скройте текст с помощью display: none - this дает гораздо больше гибкости стиля и позволяет использовать мозаику с изображением bg шириной 1 пиксель, экономит пропускную способность, и вы можете встраивать его в спрайт 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;}

ОБНОВЛЕНИЕ ОК, я вижу, что другие получили аналогичный ответ до меня - и я отмечаю, что Джон также включает средства для предотвращения появления разделителя перед первым элементом с помощью селектора li + li - что означает, что любой li идет после другого li.