Reputation: 729
I have the following html:
<div class='wrapper'>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
<div class='content'>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cce08n83/
Basically, as you can see, the purple li's are too big width-wise to fit inside the wrapper, so they drop to the next row. However, I really want it to add a overflow-x: scroll
, when it gets too big, instead of having it drop. But I don't want the scrollbar to show for the entire element inside the wrapper, just underneath the purple li's?
I tried adding: width: 100%; overflow-x: scroll;
to the ul, but that didn't work.
Upvotes: 3
Views: 66
Reputation: 241278
Since the li
elements are inline-block
, you could use white-space: nowrap
to prevent them from wrapping.
ul {
white-space: nowrap;
overflow-x: scroll;
}
Upvotes: 2