html - 如何使用 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 解决方案。

感谢您的帮助!

Answer 1

您无法真正滚动 float 内容。一旦 float ，默认不计算父容器的宽高。真的<ul>只是扩展到其设置的宽度，然后不做任何其他事情。

删除 float: left将使它们可滚动。唯一的问题是每个内联 block 之间有额外的“空间”。您可以通过删除每个列表项之间的换行符来删除它。这不是最漂亮的东西。通常我会使用 font-size: 0然后重置列表项中的字体大小。

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

jsFiddle 示例:

• Removing line breaks
• Using font-size: 0