button in tile layout with horizontal scroll-CodePudding

I have many buttons in a tiles layout that scroll vertically, like this:

<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 >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
<button >Title</button>
    
<div>

</body>

Now I need to do the same, but with horizontal scroll only. Can anyone help me please? Thank you very much

CodePudding user response：

I found the solution:

<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 >
   <div >
       <div >
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div >
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div >
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div >
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div >
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div >
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
   </div>
</div>

Please answer if you have a more simple solution that simplifies the html section. Thank you very much

CodePudding user response：

Just add this css 'white-space:nowrap;' in container DIV

<div style="width:100%;height:300px;background-color: coral;overflow-y: scroll;font-size:0px;white-space:nowrap; ">