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

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.

Categories: CSS Tags: ,
  1. tm2012.ru
    Апрель 12th,2016 в 16:41 | #1

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

  2. Konstantin Krylov
    Июль 23rd,2010 в 21:27 | #2

    @Дмитрий
    Спасибо, поправил.

  3. Дмитрий
    Июль 22nd,2010 в 12:52 | #3

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

Похожие публикации