平铺布局中带有水平滚动的按钮
P粉823268006
2023-08-31 20:54:51
<p>我有很多按钮以瓷砖布局垂直滚动，就像这样：</p>
<p>
<pre class="brush:html;toolbar:false;"><style>
.tile-button {
width:33.3%;
height:100px;
background-color: lightblue;
border: solid 1px gray;
white-space: normal;
maring: 0px;
}
</style>
<body style="margin: 0;">
<div style="width:100%;height:300px;background-color: coral;overflow-y: scroll;font-size:0px;">
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<button class="tile-button">标题</button>
<div>
</body></pre>
</p>
<p>现在我需要做同样的事情，但只有水平滚动。
有人可以帮我吗？
非常感谢</p>
只需在容器DIV中添加此CSS代码 'white-space:nowrap;'。
我找到了解决方案：
<style> /* webkit, per chrome, edge, safari */ ::-webkit-scrollbar { height: 12px; width: 5px; background: #aaa; } ::-webkit-scrollbar-thumb { background: #393812; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: #000; } /* per firefox */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: #393812 #aaa; } .container { width: 100%; height: 300px; border: 1px solid green; overflow-x: scroll; overflow-y: hidden; font-size:0px; } .inner { height: 100%; white-space:nowrap; } .floatLeft { width: 150px; margin:0px; display: inline-block; } button { height: 94px; width: 150px; margin: 0px; border: solid 1px gray; } </style> <div class="container custom-scrollbar"> <div class="inner"> <div class="floatLeft"> <div> <button>Cap1</button> </div> <div> <button>Cap2</button> </div> <div> <button>Cap3</button> </div> </div> <div class="floatLeft"> <div> <button>Cap1</button> </div> <div> <button>Cap2</button> </div> <div> <button>Cap3</button> </div> </div> <div class="floatLeft"> <div> <button>Cap1</button> </div> <div> <button>Cap2</button> </div> <div> <button>Cap3</button> </div> </div> <div class="floatLeft"> <div> <button>Cap1</button> </div> <div> <button>Cap2</button> </div> <div> <button>Cap3</button> </div> </div> <div class="floatLeft"> <div> <button>Cap1</button> </div> <div> <button>Cap2</button> </div> <div> <button>Cap3</button> </div> </div> <div class="floatLeft"> <div> <button>Cap1</button> </div> <div> <button>Cap2</button> </div> <div> <button>Cap3</button> </div> </div> </div> </div>