对齐<li>元素但隐藏溢出</li>

Question

我正在尝试将一堆头像彼此相邻，而不是去看台就像这样：

所以我在Stackoverflow中关注了一些问题：

• How to keep <li> elements on single line in fixed width <ul>?
• Keep list elements in the same line when resizing. CSS liquid layout

我将<li>元素从display: inline-block更改为display: table和display: table-cell，但现在我无法隐藏溢出。

正如你在图片中看到的那样，在cog图标后右侧的头像溢出......我在overflow-x: hidden甚至父<ul>上做了<div>但没有解决方案。

不幸的是，我无法设置一个难height并执行overflow: hidden，因为头像有Twitter Bootstrap下降...任何其他解决方案？

提前感谢您的帮助。

Answer 1

只要li使用display:inline-block，您只需在ul上设置white-space: nowrap;

Demo Fiddle

您可能希望使用width:100%;overflow:hidden;

上的ul对此进行补充

Demo Fiddle