Адаптивный список и элементы списка

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

Вы можете сделать это с помощью свойства display: table.Напишите так:

CSS

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

Отметьте http://jsfiddle.net/372sV/1/

Answer 2

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

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

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

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