使li元素水平堆叠

Question

我需要以下li以横向方式相互堆叠，如下所示：

*li1 *li2 *li3

而不是：

 * li
 * li
 * li

很多li元素会像画廊一样对齐，右边的lis会根据需要隐藏和滚动。

以下是JSFiddle

Answer 1

您需要将li元素设为display:inline-block，将其容器设为white-space:nowrap

http://jsfiddle.net/RnXDF/1/

演示

Answer 2

• 添加另一个处理其内容滚动的容器
• 让li成为display: inline-block，以便他们相互堆叠
• 在white-space: nowrap上设置ul，以便li元素保留在其狭窄容器中的一行

http://jsfiddle.net/EvilOatmeal/nxGG2/2/

Answer 3

<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>

完成你想要的css是

#list li{display:inline-block}

Answer 4

删除.comments中的宽度，然后将display：inline-block添加到.comments li， 它没有工作，因为你正在限制列表的宽度，导致当你试图水平显示它时没有足够的空间来放置它

水平