如何使用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将使它们可滚动。唯一的问题就是每个内联块之间都有额外的“空间”。您可以通过删除每个列表项之间的换行符来删除该行。这不是最漂亮的东西。通常我会使用a
font-size: 0
,然后在列表项中重置字体大小。
您还需要确保当它们碰到元素的宽度时,它们不会换行。
以上是 如何使用CSS在HTML列表中强制水平滚动? 的全部内容, 来源链接: utcz.com/qa/398226.html