gpt4 book ai didi

javascript - 如何以水平方式溢出元素?

转载 作者:行者123 更新时间:2023-11-28 15:10:43 25 4
gpt4 key购买 nike

那么,如何使这些蓝色方 block 水平溢出以便出现水平滚动条(对于页面而不是 div)并使其灵活以便在添加新方 block 时它可以扩展..并且任何人都可以使用 CSS 和 Javascript或 Jquery 完全没有问题!提前致谢

    <head>
<style>
.test {
background: blue;
width: 372.1478174125px;
height: 230px;
margin: 5px;
float: left;
display: inline-block;

}
.horizontal {
background: gray;
height: 640px;
margin: 0px;
padding: 0px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class= "horizontal">
<div class = "test"> hello </div><div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
<div class = "test"> hello </div>
</div>

</body>

最佳答案

您需要删除元素上的 float: left;,因为容器上的 white-space: nowrap; 对 float 元素本身没有任何影响。

并且不要忘记将 overflow-x: auto; 添加到容器中。

.horizontal {
background: gray;
height: 640px;
margin: 0px;
padding: 0px;
white-space: nowrap;
overflow-x: auto; /* new */
}

.test {
background: blue;
width: 372.1478174125px;
height: 230px;
margin: 5px;
/* float: left; */
display: inline-block;
}
<div class="horizontal">
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
<div class="test"> hello </div>
</div>

关于javascript - 如何以水平方式溢出元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48467971/

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