我有一个这样的列表:
<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 解决方案。
感谢您的帮助!
最佳答案
您无法真正滚动 float 内容。一旦 float ，默认不计算父容器的宽高。真的<ul>只是扩展到其设置的宽度，然后不做任何其他事情。
删除 float: left将使它们可滚动。唯一的问题是每个内联 block 之间有额外的“空间”。您可以通过删除每个列表项之间的换行符来删除它。这不是最漂亮的东西。通常我会使用 font-size: 0然后重置列表项中的字体大小。
您还需要确保元素在达到元素宽度时不会换行。
jsFiddle 示例:
关于html - 如何使用 CSS 在 HTML 列表中强制水平滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9707807/