Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make <ul> fit width of <li> links

Tags:

html

css

overflow

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;
}
like image 380
Michael Tot Korsgaard Avatar asked Dec 27 '13 18:12

Michael Tot Korsgaard


1 Answers

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/

like image 107
DaniP Avatar answered Nov 09 '22 11:11

DaniP