CODEWITHSUNDEEP
htmlcss
Gasim
Gasim

Reputation: 7961

How can I make a list horizontally scrollable without items going to the second line?

I have a list of items:

<div class="dates-bar">
    <ul>
      <li>1</li>
      <li>...</li>
      <li>30</li>
   </ul>
</div>

I need this bar to be in a single line. I don't know how to achieve that. I have tried the following:

.dates-bar {
    width: 100%;
    overflow-x: scroll;
}

.dates-bar ul {
   width: 500%;
}

.dates-bar li {
   display: inline-block;
   margin: 0 10px;
}

The problem here is that, if the numbers items cross get to the end of the bar, it will wrap the items to the second line and if the number of items is small, there will be a huge gap at the end of this bar. With some tweaking I can fix the latter one. However, I don't know what to do, so that the items don't go over the second line.

Upvotes: 1

Views: 79

Answers (4)

Michael Edelstone
Michael Edelstone

Reputation: 351

Try this CSS:

.dates-bar li {
    display: inline-block;
    margin: 0 10px;
}
.dates-bar {
   width: auto;
   overflow-x: scroll;
}
.dates-bar ul {
    white-space: nowrap;
}

Fiddle: http://jsfiddle.net/wfxhuwvc/

Upvotes: 1

Grzegorz Palian
Grzegorz Palian

Reputation: 349

You can use display: flex; for this:

.dates-bar { 
  width: 100%; 
 } 
.dates-bar ul { 
  width: 500%; 

  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}
.dates-bar li { 
  display: inline-block; 
  margin: 0 10px; 

  flex: 0 0 auto;
}

Upvotes: 1

IMI
IMI

Reputation: 2469

Set your UL to display:flex;

.dates-bar {
    width: 150px;
    overflow-x: scroll;
}

.dates-bar ul {
  display:flex;
}  

.dates-bar li {
   display: inline-block;
   margin: 0 10px;
}
<div class="dates-bar">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>...</li>
      <li>30</li>
   </ul>
</div>

Upvotes: 1

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

.dates-bar{
    width:auto;
    max-width:100%
    overflow-x: atuo;
}

.dates-bar ul{
    white-space: nowrap;
}

The whitespace property is the missing ingredient.

Upvotes: 3

Related Questions