htmlcsshorizontal-scrollingtiles

button in tile layout with horizontal scroll


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 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>

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


Solution

  • 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 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>

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