javascript - how to force display all fixed width elements inside a div in a single line -


i have fixed width elements inside div , need force elements displayed on single line horizontal scroll bar 'grid-content'. have tried many things stuck. here fiddle - https://jsfiddle.net/29pobkzf/

here css , html

 .grid-container {        width: 100%;          margin-top: 20px;        overflow: auto;      }            .grid-content {        width: 100%;        height: 400px;        float: left;      }      .grid-content .grid-row {        width: 100%;        overflow-x:scroll;        border-right: 1px solid #ccc;      }      .grid-content .grid-row .grid-column {        border: 1px solid #cccccc;         display: inline-block;        border-top: 0;        border-right: 0;        padding: 10px;        height: 60px;        width: 400px;      }
 <div class='grid-container'>          <div class="grid-content">                  <div class='grid-row'>                          <div class='grid-column'>a1</div>                          <div class='grid-column'>a2</div>                          <div class='grid-column'>a3</div>                          <div class='grid-column'>a4</div>                   </div>                    </div>      </div>           

my intention grid-content have scrollbar , contents occupy single line/horizontally aligned. problem facing elements a3 , a4 getting rendered below a1 , a2.

this because .grid-column set display: inline-block; , wrap onto new line default. behaviour can changed by:

  • adding white-space: nowrap; .grid-content .grid-row

you may want remove white space between .grid-column elements either writing them out in 1 line in html (as in example below) or putting comments in between them. stop white space adding gaps between each .grid-column element in resultant html.

.grid-container {    margin-top: 20px;    width: 100%;  }  .grid-content {    float: left;    height: 400px;    width: 100%;  }  .grid-content .grid-row {    border-right: 1px solid #ccc;    overflow-x: scroll;    width: 100%;    white-space: nowrap;  }  .grid-content .grid-row .grid-column {    border: 1px solid #cccccc;    border-right: 0;    border-top: 0;    display: inline-block;    height: 60px;    padding: 10px;    width: 400px;  }
<div class='grid-container'>    <div class="grid-content">      <div class='grid-row'>        <div class='grid-column'>a1</div><div class='grid-column'>a2</div><div class='grid-column'>a3</div><div class='grid-column'>a4</div>      </div>    </div>  </div>


Comments