Как установить LI, чтобы вести себя как ячейка таблицы

Question

Я хочу создать меню, используя списки (ul и li).
Что касается того, что использование свойства table-cell не является перекрестным браузером, как стилизовать li s, чтобы фиксировать с помощью подобных ячеек таблицы, подходящих для его контейнера?

----------------------------------------------------------------------------- 
|  Item 1  |  Item 2  |  Item 3  |  Item 7  | 
----------------------------------------------------------------------------- 

Примечание:
1. Я вынужден использовать список и не могу использовать таблицу
2. Мы не знаем, сколько элементов существует
3. Я хочу сделать это без JavaScript
4. Мы не знаем, как ширина контейнера
5. родитель ul должна быть шириной только 100%, не используйте статическую ширину пожалуйста

Answer 1

семантически, меню представляет собой список, поэтому использование <li> является более подходящим, чем <table>. WC3 имеет достойный план, как это сделать here. Чтобы зафиксировать ширину, установите как ширины <ul>, так и <li> s.

Answer 2

ul li {float: left; width: 100px;} 

Что-то вроде этого?

Или так: http://jsfiddle.net/qLxSh/

Answer 3

Я боюсь, что слишком много донгов, чтобы сделать это столь же гибким, как и должно быть.

Answer 4

ul li { float: left; } 

или

ul li { display: inline-block; } 

Обратите внимание, что "дисплей: встроенный блок;" не работает на IE6 и IE7. В этих браузерах, вы должны заменить

ul li { display: inline-block; } 

с

ul li { display: inline; zoom: 1; } 

Answer 5

Вот лучший способ, с помощью опции отображения CSS: jsFiddle demo