javascript - 响应列表和列表项

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/