gpt4 book ai didi

html - 无法让水平列出的 ul 水平溢出(和滚动)

转载 作者:技术小花猫 更新时间:2023-10-29 12:18:07 25 4
gpt4 key购买 nike

我试图让一个无序列表水平列出(用 float:left 完成),但它拒绝水平溢出。相反,它会在下一行自动溢出(此外,即使使用 overflow-y:none,它也会自动创建一个垂直滚动条。有什么想法吗?

<style type="text/css">
ul {
height:15px;
width:400px;
overflow-y:none;
overflow-x:auto;
}

li {
float:left;
}

</style>

<body>
<div>
<ul id="someList">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
<li>element 5</li>
<li>element 6</li>
<li>element 7</li>
</ul>
</div>
</body>

最佳答案

如果我没理解错的话,应该是这样的:

http://jsfiddle.net/Uyc8d/

我已经切换到使用 display: inline-block(而不是 float: left),并且我正在使用 white-space: nowrap 以防止换行。

ul {
width: 400px;
overflow-x: scroll;
background: #ccc;
white-space: nowrap;
}

li {
display: inline-block;

/* if you need ie7 support */
*display: inline;
zoom: 1;
}

关于html - 无法让水平列出的 ul 水平溢出(和滚动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6513793/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com