如何使用CSS强制在HTML列表中的横向滚动？

我有一个这样的列表：

<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解决方案，我可以在列表中单独使用。

感谢帮助！

解决方法

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

删除float：left将使它们可滚动。唯一的问题就是在每个内嵌块之间有额外的“空格”。您可以通过删除每个列表项之间的换行符来删除它。这不是最漂亮的事情通常我会使用font-size：0，然后在列表项中重新设置font-size。

您还需要确保这些项目在元素的宽度上不会包装到新行。

jsfiddle示例：

> Removing line breaks
> Using font-size: 0

原文地址：https://www.jb51.cc/css/218514.html