响应列表和列表项

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设置子项的显示选项＆gt; 3。

我认为第二种解决方案更清洁。

<强>示例
http://jsfiddle.net/372sV/

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