ul, li — разместить элементы списка горизонтально

По-умолчанию элементы списка будут располагаться вертикально. В случае, если необходимо разместить их горизонтально, можно использовать седующий способ:
HTML:

<ul class="hor_nav">
<li>Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li>
</ul>

CSS:

ul.hor_nav {
margin: 0;
padding: 0;
}
ul.hor_nav li {
display: inline;
margin-right: 4px;
padding: 2px;
}

Главным в данном примере является то, что к селектору li добавлен стилевой атрибут display со значением inline, который преобразует блочный элемент во встроенный. Также, чтобы убрать отступы вокруг списка, добавлены параметры margin и padding к селектору ul.

Комментарии 3

Написать комментарий
  1. tm2012.ru

    Благодаря Вашему и другим схожим по тематике сайтам я сделал сам свой собственный сайт, вот результат: http://tm2012.ru/shop-wallmode/

  2. Дмитрий

    У вас ошибочка:
    padding; 0;
    поправьте.

Оставить комментарий

или Ctrl+Enter

Комментарии к записи по RSS