如何使用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方法强制列表项全部在一行中,所以我可以使用水平滚动？现在如果我设置溢出:auto我只是得到垂直滚动条,我不想要.

我不想在包装div上设置它.我只是好奇我是否可以单独使用列表中的CSS解决方案.

感谢帮助!

Answer 1

你不能真正滚动浮动的内容.一旦浮动,默认情况下不会计算父容器的宽度或高度.真的<ul>只是扩展到它的设定宽度,然后没有做任何其他事情.

删除float: left将使它们可滚动.那么你唯一的问题是每个内联块之间都有额外的"空间".您可以通过删除每个列表项之间的换行符来删除它.这不是最漂亮的事情.通常我会使用a font-size: 0然后重置列表项中的font-size.

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

jsFiddle示例:

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

Answer 2

这是一个工作小提琴:http://jsfiddle.net/qnYb5/

相关CSS:

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

li{
    display:inline;
}