Центр a <ul> список с левым float <li> с CSS

Мне нужно воспроизвести такое меню:

+----------------------------------------------------------------------------+
        Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

Но на самом деле у меня есть это:

+----------------------------------------------------------------------------+
Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

Мой код:

<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
</ul>

Мой фактический css для этого кода:

ul { list-style: none outside none; margin:0; padding: 0; }
li { float: left; margin: 0 10px; }

Как я могу это сделать?

PD: альтернатива IE7, если это возможно.

Заранее благодарю вас!

Ответы

Ответ 1

Используйте этот код вместо li:

li { margin: 0 10px; display: inline; }

И центрируйте содержимое ul s:

ul { list-style: none outside none; margin:0; padding: 0; text-align: center; }

Ответ 2

Используйте display: inline в li и text-align: center в ul.

ul { list-style: none outside none; margin:0; padding: 0; text-align: center }
li { display: inline; margin: 0 10px; }

Пример: http://jsfiddle.net/ravan/gh29g/

Ответ 3

Просто измените отображение li на встроенный блок; и добавьте text-align:center в ul

См. демонстрацию: http://jsfiddle.net/adardesign/6RZL4/

Ответ 4

Создание элементов li display:inline и списка text-align:center разрешит проблему в этом случае:

ul { list-style: none outside none; margin:0; padding: 0; border:1px solid #f33; text-align:center;}
li {display:inline; margin: 0 10px; border:1px solid #ccc; }

enter image description here

Fiddle: http://jsfiddle.net/mohsen/rzfPW/

Но если в ваших элементах списка было больше вещей (например, пункты меню, отображаемые при наведении курсора мыши), то использование display:inline не является хорошим решением. потому что тогда элемент не является встроенным элементом.

Вы можете сделать отображение: блок и по-прежнему выровнять их по центру с поплавком: слева и с шириной и маржей, рассчитанными процентом:

ul { list-style: none outside none; margin:0; padding: 0; border:1px solid #f33; text-align:center; padding:3px 0; overflow:hidden;}
li {display:block; width:16%; float:left; margin: 0 2%; background:yellow}

enter image description here

скрипт: http://jsfiddle.net/mohsen/rzfPW/1/

Обратите внимание, используя проценты и пиксели (возможно, для границ) в вашем css вызовут ошибки

Ответ 5

Добавить дополнение: 0 10px; на li

Это то, что центрирует параметры - просто поиграйте с дополнением, пока вы не будете довольны им.