Списки с разделителями между элементами

Часто возникает необходимость создать список с разделительными линиями между элементами списка, Но как правило, в начале и в конце списка линий быть не должно или они должны быть другими. Как же сделать это с помощью CSS не создавая специального класса для первого или последнего элемента списка?

Всё очень просто, нужно всего лишь все элементы списка сдвинуть на –1 пиксель, а контейнеру списка добавить свойство, скрывающее не помещающееся содержимое — overflow: hidden.

Пример:

Есть список цветовых моделей, которые нам необходимо расположить горизонтально и добавить к ним разделители.

.hlist ul {
	overflow: hidden; /* кроме скрытия первого разделителя, свойство не дает контейнеру захлопнуться. */
}
.hlist ul li {
	float: left; /* располагаем элементы горизонтально */
	border-left: 1px solid #ccc; /* создаем левую границу как разделитель */
	list-style: none; /* убираем маркеры */
	margin-left: -1px; /* сдвигаем влево на один пиксель, чтобы первый разделитель скрылся */
}

Из-за лишнего сдвига, расстояния слева и справа разделителя не равны. Для того, чтобы уровнять эти расстояния следует сделать внутренние отступы с разницей в один пиксель в пользу стороны сдвига:

	padding: 5px 16px 5px 15px;

Для того, чтобы механизм работал в IE, нужно включить для контейнера списка свойство hasLayout. Я для этого использую HolyHack:

.hlist ul {
	height: 1%;
}

Для вертикальных списков делается примерно то же самое, только элементы сдвигаются вверх (margin-top). Также для элементов вертикального списка тоже нужно включить hasLayout, если они не имеют свойства «float: left».

Важно!

Механизм не будет работать, если контейнеру списка добавить внутренние отступы (padding), вернее, чтобы скрыть разделитель нужно будет сдвигать дополнительно на величину внутреннего отступа.

Пример верстки упомянутого механизма.

Дата: 14.01.2009
»
Категории: CSS
«
Google     
(написать)

]]> Константин ]]>

Спасибо за методику, но в этом случае действительно просто добавить разделитель “|” в html, честно говоря никогда таким не заморачивался.

»
17 01.09 05:12

]]> nemec ]]>

ul li:first-child
{
border: 0px;
}
А ваш вариант я бы вынес в отдельный фаил (специально для IE6). Зачем извращатся для одного устарелого браузера?

»
17 01.09 15:37

]]> Никита ]]>

Константин, разделитель «|» — мусор, опять же чтобы его вставлять в динамическом списке, нужно с помощью php определять первый или последний элемент. Лишний код.

nemec, хороший вариант. Спасибо.

»
18 01.09 20:58

]]> Вебдайджест, 19.01.09 | HTML и CSS, доступность и юзабилити — Life Style ]]>

[...] Списки с разделителями между элементами — использование списков с разделителями между [...]

»
19 01.09 15:44

]]> Максим Покровский ]]>

Когда мне впервые понадобилось сделать подобный список — этот метод первое, что пришло в голову. Кстати, если разделители графические, то метод тоже катит (это в тему про “поставить | “), только сдвиг от изображения зависит.

»
19 01.09 20:18

]]> Yuriy ]]>

Сначала было подумал, что проще иметь функцию РНР для построения динамического списка. Но потом вспомнил, что сейчас вовсю используется идея отделения кода от дизайна. Так что использование CSS более чем оправдано

»
28 01.09 17:44

]]> Данияр ]]>

А как быть в том случае если надо отцентровать меню?

»
04 03.09 08:48

]]> Никита ]]>

Данияр, в таком случае, вам нужно либо фиксировать ширину списка (ul) и добавить margin: 0 auto;
либо оформлять элементы списка как inline-block, а списку задать свойство text-align: center;

»
04 03.09 10:40

]]> Данияр ]]>

Ага понятно. Спасибо большое.

»
04 03.09 13:12

Напишите комментарий