如何使用CSS在HTML列表中强制水平滚动？

Question

我有一个这样的列表：

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>

以及以下CSS：

ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }

我正在尝试强制列表项从左到右显示，也就是说

 one - two - three - four

我的问题：
按照这种方法，我得到了两行，每行有两个项目。 问题：
是否有一种CSS方式可以强制列表项都在同一行中，这样我就可以使用水平滚动？现在，如果我设置 overflow:auto ，我只能获得垂直滚动条，这不是我想要的。

我不想在包装div上设置这个。我只是想知道是否有一个仅在列表内部使用的CSS解决方案。

感谢帮助！

- frequent

Answer 1

浮动的内容无法真正滚动。一旦浮动了，其默认情况下不会计算在父容器的宽度或高度内。实际上，<ul> 只会扩展到其设置的宽度，然后不再进行任何其他操作。

移除 float: left 将使它们可以滚动。然后您唯一遇到的问题是每个内联块之间存在额外的“空白”空间。您可以通过删除每个列表项之间的换行符来解决这个问题。虽然不是最好看的方法，但通常我会使用 font-size: 0 ，然后在列表项中重置字体大小。

您还需要确保项目在达到元素宽度时不会换行。

jsFiddle 示例：

• 删除换行符
• 使用font-size: 0

- animuson

---

以上两个 jsFiddle 链接中的第一个已经失效。 - 2540625

Answer 2

这里是一个可工作的示例：http://jsfiddle.net/qnYb5/

相关的 CSS：

ul{
    list-style-type:none;
    white-space:nowrap;
    overflow-x:auto;
}

li{
    display:inline;
}

- MetalFrog

---

那里的height实际上与滚动条无关，实际上它只是使内容被截断。http://jsfiddle.net/nPmLe/1/ - 这个答案只是误导，隐藏在其他实际上起作用的属性后面。高度不需要受到任何限制。 - animuson

Answer 3

您没有限制 <ul> 的高度，因此浏览器可以自由将“额外”的元素换行到它们自己的行上。您需要使用 height: 1em 或其他值来确保 <ul> 不会变得更高，从而强制一切水平滚动。

- Marc B

---

不行。不起作用。列表项似乎不关心，如果我设置overflow: auto，我只能获得垂直滚动。 - frequent

Answer 4

在 div 上使用 overflow-x: scroll;。

在这里试一试。

- Krazer

Answer 5

你可以用CSS+JavaScript来实现，例如(http://www.smoothdivscroll.com/v1-2.htm)。不要认为有CSS纯解决方案（能跨浏览器工作）。

- daker