Schaltflächen mit horizontalem Scrollen im Kachellayout
P粉823268006
2023-08-31 20:54:51
<p>Ich habe viele Schaltflächen, die in einem Kachellayout vertikal scrollen, wie folgt: </p>
<p>
<pre class="brush:html;toolbar:false;"><style>
.tile-button {
Breite: 33,3 %;
Höhe: 100 Pixel;
Hintergrundfarbe: hellblau;
Rand: einfarbig 1 Pixel grau;
Leerraum: 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">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<button class="tile-button">title</button>
<div>
</body></pre>
</p>
<p>Jetzt muss ich dasselbe tun, aber nur mit horizontalem Scrollen.
Kann mir jemand helfen?
Vielen Dank</p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
只需在容器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>