I have a div with overflow-x:scroll;
and in that div I have a list, and that list have some links. But I don't seem to be able to make my list a wide as its links. Which results in my links jumping lines.
How would I fix this?
My html
<div class="menu">
<ul>
<li>
<a href="#">a long text that jumps lines</a>
</li>
<li>
<a href="#">a line that don't jump</a>
</li>
</ul>
</div>
My CSS
.menu{
width:400px;
overflow-x:scroll;
}
When you say Which results in my links jumping lines I guess is breaking in a new line, then you can use this property to avoid that:
.menu ul li {
white-space:nowrap;
}
Also to make your ul
get the full width
change his display property:
.menu ul {
display:inline-block;
}
The demo http://jsfiddle.net/5KSaM/7/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With