Центрирование горизонтальных списков (float)
С переходом на блочную верстку и отказом от верстки таблицами
центрирование горизонтальных списков без таблиц стало настоящей проблемой. Конечно, если горизонтальный список сделан с помощью
display:inline, то с центрированием проблем нет, а вот, если необходимо сохранить блочность элементов списка, то обычными средствами список не отцентрировать никак, даже
margin:0 auto для
ul не помагает.
Но решение есть, не очень простое, но есть. Далее представлен
листинг стилей для центрирования горизонтального плавающего списка.
.centered_list
{
width:100%;
position:relative;
overflow:hidden;
}
.centered_list div
{
left:50%;
position:relative;
float:left;
}
.centered_list ul
{
left:50%;
position:relative;
float:left;
list-style:none;
}
.centered_list ul li
{
float:left;
width:auto;
}
<ul>
<li>1 элемент</li>
<li>2 элемент</li>
<li>3 элемент</li>
</ul>
- 1 элемент
- 2 элемент
- 3 элемент
Так как способ не очень простой, то он требует некоторого пояснения:
- Список нужно заключить в два блока (div).
- Для первого блока нужно установить ширину, если ширина не фиксированная, то ставим 100%, а также ставим overflow:hidden, чтоб завершить обтекание элементов списка.
- Для второго блока нужно установить отступ слева 50%.
- Для списка ul установить отступ слева -50%, чтоб убрать отступ слева заданого ранее.
- Для второго и третьего блока небходимо установить обтекание слева.
- Для всех трех блоков устанавливается относительное позиционирование.
Этот
способ работает во всех браузерах (кроссбраузерный) и, что самое главное, список центрируется и
для элементов списка сохраняются все блочные свойства.
Добавить комментарий
Комментарии
а то я не совсем понимаю 3 и 4 пункт описания, Ответить | Ответить с цитатой | Цитировать
.centered_list div{left:50%; }
а 4 это:
.centered_list ul
{
left:-50%; }
Да, в листинге ошибка… для списка нужно использовать минусовой отступ. Ответить | Ответить с цитатой | Цитировать
RSS лента комментариев этой записи.