Отзывчивый список и элементы списка

Question

Как сделать неуверенное количество элементов списка чувствительным в браузере? Например, у меня есть список из одной строки и вы хотите, чтобы все 3 элемента li были видны в любое время. Когда я изменяю размер окна браузера, элементы li меняются так, что их видно только 3.

HTML:

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    ... 
    </ul> 

CSS:

ul {float: left} 
li {float: left; max-width: 33%} 

Я предпочитаю метод кросс-браузер, используя только CSS. Если javascript необходим, то пусть будет так. Как я могу достичь этого в ответном виде для Интернета?

Любая помощь приветствуется! Благодарю.

Answer 1

Вы можете сделать это с дисплеем: таблицы свойств. Написать так:

CSS

li { 
    display:table-cell; 
    background:red; 
    border:1px solid green; 
} 

Проверить это http://jsfiddle.net/372sV/1/

Answer 2

Задайте размер (высота) для ul и используйте метод переполнения, чтобы скрыть дополнительные элементы. Или используйте CSS для установки опции отображения для детей> 3.

Я думаю, что второе решение намного чище.

Образец
http://jsfiddle.net/372sV/

ul { 
    float: left 
    width: 100%; 
} 
ul li+li+li+li { 
    display: none; 
} 
li { 
    float: left; 
    width: 33%; 
}