Javascript 响应列表和列表项

如何使未知数量的列表项在浏览器中响应？例如，我有一个单行列表，希望有3个li元素始终可见。当我调整浏览器窗口的大小时，li元素会缩放，因此只有3个可见元素

html:

我更喜欢只使用CSS的跨浏览器方法。如果javascript是必要的，那就这样吧。我如何在网络上以响应的方式实现这一点

感谢您的帮助！谢谢。

设置ul的大小（高度），并使用溢出方法隐藏“其他”元素。或者使用CSS将子项的显示选项设置为>3

我认为第二个解决方案更干净

样本

---

可以使用display:table属性执行此操作。这样写：

CSS

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

---

选中此项

为什么使用

显示：表格单元格

而不是指定的宽度？因为33.33%可能不完全分开？当你们在改进我的示例代码时，我很好奇。@Smamatti我为什么使用这个表有很多原因。首先，每个浏览器呈现“%”的方式不同。第二，如果在“%”DIV上添加边框和填充，则是在其中添加边框和填充，然后断开宽度。

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

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

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