Реферат: CSS Design: Укрощение списков

Символ | часто используется для обозначения различных вариантов выбора. Вполне естественно использовать его в меню. Сымитируем этот символ с помощью границ у LI.

#pipe ul {

margin-left: 0;

padding-left: 0;

display: inline;

}

#pipe ul li {

margin-left: 0;

padding: 3px 15px;

border-left: 1px solid #000;

list-style: none;

display: inline;

}

#pipe ul li.first {

margin-left: 0;

border-left: none;

list-style: none;

display: inline;

}

Мы добавили класс class="first" к первому LI, чтобы у него слева не появлялась ненужная граница.

Item 1

Item 2

Item 3

Item 4

Правила можно изменить, чтобы придать списку вид закладок:

#tabs ul {

margin-left: 0;

padding-left: 0;

display: inline;