列表项的溢出隐藏答案

【问题标题】：overflow hidden for list items列表项的溢出隐藏
【发布时间】：2012-07-09 12:39:42
【问题描述】：

我有一个 UL 列表，其中包含 li 中的图像。我已将 UL 宽度指定为 400px，如果 li 项目更多，那么我希望它被隐藏，但它会在下一行出现。有什么解决办法吗？

【问题讨论】：

【解决方案1】：

您需要为您设置一个额外的white-space: nowrap;UL-list，以防止在可用空间末尾出现换行符。

【讨论】：

【解决方案2】：

溢出隐藏只允许在 BLOCK 元素上。您不能将 UL 设置为块。但这里有一个关于它如何工作的例子：

刚刚添加

.p_gallery { float:left; width:400px; overflow:hidden; }

并更改了 ul CSS

.p_gallery ul{ margin:20px 0 20px 24px; background-color:#ccc;  padding:0; float:left; width:1000px;}

【讨论】：

你在回答错误的假设：overflow: hidden; 值可以设置在任何元素上，当然UL 可以设置为display: block;（这是默认值，顺便说一句）。
对不起，我认为 ul 不是块元素。但我的回答有效。为什么不溢出：隐藏的工作，只有 nowrap？
它在没有white-space: nowrap; 的情况下也可以工作，但是您需要设置一个高度，这在给定的示例中没有。如果不指定父框的高度，overflow: hidden; 仍然有效，但框会在高度上展开以围绕所有被包裹的元素展开。