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

Question

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

Моя структура HTML выглядит следующим образом: ol> li> a> img .

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

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

Что делать?

Answer 1

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

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

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

Answer 2

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

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

Например:

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

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

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

Answer 3

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

.menustyle li + li:before

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

Answer 4

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

SO:

case: после

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

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

case: before

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

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

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

Answer 6

Вы можете добавить один 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;
}

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

Answer 7

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

Answer 8

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

border-right:1px solid;

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

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

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

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

Удачи:)

Answer 9

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

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

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