Горизонтальные списки ( float )
По умолчанию
элементы списков в html располагаются один под другим (
блочно), но очень часто необходимо, чтоб они располагались в одну строку. К сожалению в свойствах списков нет специального атрибута для превращения в горизонтальный. Благодаря
css есть возможность вертикальный список превратить в горизонтальный. Это используется в основном для создания горизонтального меню.
Способ рассмотренный в этой статье использовать нужно в том случае если необходимо сохранить блочные свойства для элементов списка.
ul
{
width:100%;
overflow:auto;
}
ul li
{
float:left;
}
<ul>
<li>1 элемент</li>
<li>2 элемент</li>
<li>3 элемент</li>
</ul>
- 1 элемент
- 2 элемент
- 3 элемент
Данный способ работает если для элементов списка устанавливать фиксированную ширину. Если ширина не должна быть фиксированной - нужно установить ширину элемента auto.
Добавить комментарий
