gpt4 book ai didi

css - 如何在主体内水平滚动div

转载 作者:太空宇宙 更新时间:2023-11-03 22:38:27 29 4
gpt4 key购买 nike

我正在尝试水平滚动。它显示滚动条但它不滚动??下面是

<!DOCTYPE html>
<html>
<head>
<title>qwe</title>
</head>
<body>
<div style="width: 1000px; overflow-: scroll;">
<div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
<div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
<div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
<div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
<div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>
</html>

this is the output of above code

最佳答案

display: inline 提供给子级而不是 float:left 并将 white-space: nowrap 提供给父级。

<body>
<div style="width: 300px; overflow: scroll; white-space: nowrap;">
<div style="display: nline;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div style="display: nline;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div style="display: nline;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
<div style="display: nline;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
<div style="display: nline;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
<div style="display: nline;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
<div style="display: nline;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>

关于css - 如何在主体内水平滚动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45159417/

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