响应式列表和列表项目

如何让浏览器中的未知数量的列表项目响应？例如，我有一个单行列表，并希望始终可见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是必要的，那就这样吧。我如何以网络响应的方式实现这一目标？

任何帮助表示赞赏！谢谢。

2012-03-27 wwwuser

你可以用显示器做到这一点：表属性。像这样写：

CSS

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

2012-03-27 08:32:46 sandeep

为什么你使用'显示：表cell'，而不是指定的宽度？因为33.33％可能不会精确分割？只是好奇，当你正在改善我的示例代码。 – Smamatti 2012-03-27 11:01:35

@Smamatti有很多事情，为什么我使用表。首先，每个浏览器都以不同的方式呈现'％'其次，如果你在'％'DIV上添加border＆padding，那么就会增加宽度然后打破。 – sandeep 2012-03-27 12:24:56

设置ul的大小（高度），并使用overflow方法隐藏'additional'元素。或者使用CSS设置儿童> 3的显示选项。我认为第二种解决方案更清洁。

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

2012-03-27 08:05:34 Smamatti

回答