Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 
Горизонтальный список HTML

Верстать списки в HTML можно и горизонтальные, и вертикальные. Нас интересует создание горизонтального списка. Мы помним, что маркированные списки в HTML задаются парными тегами "ul" и "li", а нумерованные списки тегами "ol" и "li". Как же сделать горизонтальный список в HTML, чтобы все пункты отображались в одну строку?


Чтобы список был горизонтальные и перечисление данных в списке имело горизонтальный вид следует к тегу "ul" добавить правило в css list-style:none; (это правило убирает маркировку списка, поэтому прописывать его нужно по мере необходимости) а для тега "li" display: block; и float: left; тоже получится выровнять список в строку и без отступов между элементами. Например:


ul.menu
{
	border:0;
	background:#fff;
	border:solid 0px #eee;
        list-style:none; /* Убирает маркировку списка */
}

.module_content ul.menu
{
	border:0;
}

ul.menu li
{
	border-bottom:solid 1px #ddd;
        display: block; 
        float: left; 
}

Есть ещё один способ, который я нашла, но у меня он не заработал, к сожалению. Нужно к тегу "li" добавить в css правило display: inline; Например:


ul li {
    display: inline; /* Отображать как строчный элемент */
   }

Ну вот, в принципе, и всё. Горизонтальный список готов! :)