Мне нужно добавить разделители между элементами навигации. Разделители - это изображения.
Моя HTML структура как: ol > li > a > img
.
Здесь я подхожу к двум возможным решениям:
- Чтобы добавить больше
li
тегов для разделения (бу!), - Включите разделитель в изображение каждого элемента (это лучше, но это дает возможность, что пользователь может щелкнуть, например, «Домашняя страница», но попасть в «Службы», потому что они расположены один за другим, и пользователь может случайно щелкнуть разделитель, который принадлежит «Сервисам»);
Что делать?
css
navigation
usability
separator
даГревис
источник
источник
Ответы:
Просто используйте изображение-разделитель в качестве фонового изображения на
li
.Чтобы оно отображалось только между элементами списка, расположите изображение слева от
li
, но не на первом.Например:
Этот CSS добавляет изображение к каждому элементу списка, который следует за другим элементом списка - другими словами, ко всем, кроме первого.
NB. Имейте в виду, что соседний селектор (li + li) не работает в IE6, поэтому вам нужно будет просто добавить фоновое изображение к обычному li (с условной таблицей стилей) и, возможно, применить отрицательное поле к одному из краев.
источник
:before
псевдоселектора предотвращает его появление после последнего элемента.border-left
чтобы провести вертикальную линию между элементами.Если нет необходимости использовать изображения для разделителей, вы можете сделать это с помощью чистого CSS.
Это помещает полосу между каждым элементом списка, как показано на изображении в исходном вопросе. Но поскольку мы используем соседние селекторы , он не помещает полосу перед первым элементом. И поскольку мы используем
:before
псевдоселектор, он не помещает его в конец.источник
Вы можете добавить один
li
элемент там, где хотите добавить разделительВ CSS вы можете добавить следующий код.
Это увеличит скорость выполнения, так как не будет загружаться изображение. просто проверь это .. :)
источник
Другое решение в порядке, но нет необходимости добавлять разделитель в самом конце, если используется : after, или в самом начале, если используется : before .
ТАК:
случай: после
случай: до
источник
Чтобы разделитель располагался по центру по вертикали относительно текста меню,
источник
Добавьте разделитель к
li
фону и убедитесь, что ссылка не расширяется, чтобы закрыть разделитель, что означает, что разделитель не будет доступен для нажатия.источник
Для тех, кто использует Sass , я написал для этой цели миксин :
Пример:
Что даст вам это:
источник
Я считаю, что лучшее решение для этого - это то, что я использую, и это естественная граница css:
Возможно, вам придется позаботиться о заполнении, например:
Наконец, если вы не хотите, чтобы последний li имел эту разделяющую границу, присвойте last-child значение none в графе right, например:
Удачи :)
источник
Поместите его в качестве фона в элемент списка:
Затем я рекомендую другую разметку для доступности:
вместо того, чтобы встраивать изображения в строку, поместите текст в виде текста, окружите каждое диапазоном, примените изображение в качестве фона, а затем скройте текст с помощью display: none - this дает гораздо больше гибкости стиля и позволяет использовать мозаику с изображением bg шириной 1 пиксель, экономит пропускную способность, и вы можете встраивать его в спрайт CSS, который сохраняет HTTP-вызовы:
HTML:
CSS:
ОБНОВЛЕНИЕ ОК, я вижу, что другие получили аналогичный ответ до меня - и я отмечаю, что Джон также включает средства для предотвращения появления разделителя перед первым элементом с помощью селектора li + li - что означает, что любой li идет после другого li.
источник