Как создать меню, разделенное панелью, но у первого и последнего элемента нет панели?

Question

Как вам добиться такого меню:

О нас |Конфиденциальность |Контакт |Карта сайта

... меню, разделенное вертикальной чертой, но первый и последний элементы не имеют полосы слева и справа (как показано в примере)?

Пункты меню генерируются динамически (используется в WordPress), а не вручную.

спасибо.

Answer 1

Если вы используете элементы списка в качестве разметки для навигации, вы можете отобразить линию между каждой ссылкой, создав разделитель в виде фонового изображения на li.

* 1005.* Хитрость в том, чтобы он отображался только между элементами списка, - расположить изображение слева от li, но не на первом.В этом примере используется соседний селектор :

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

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

В качестве альтернативы вы можете использовать свойство CSS content с псевдоклассом before вместо изображения.Следующий код добавляет канал перед вашими навигационными ссылками (снова используя соседний селектор).

#nav li + li a:before {
    content: "|";
}

Имейте в виду, что свойство содержимого не поддерживается в IE6 и IE7, а соседний селектор не поддерживается в IE6.

См. Здесь содержимое CSS и совместимость браузера - http://www.quirksmode.org/css/contents.html

Answer 2

Я думаю, что лучший способ сделать это с помощью класса CSS.

Во внешнем виде → Меню: http://d.pr/i/I9ko+

1. Нажмите Параметры экрана
2. ПроверитьКлассы CSS

3. Добавьте класс «last» к последнему пункту меню. Затем в вашем style.css добавьте:

   #nav li.last span { display: none; }

Answer 3

Нашли более простое решение для WordPress!

Просто зайдите в Внешний вид> Меню и добавьте " |"в конце навигационной метки для каждого заголовка меню !!

Answer 4

Вертикальная черта - это просто символ на клавиатуре, поэтому вы можете ввести его между словами.