Geek asks and answers

Is there a way to make the verbose li in the horizontal navigation menu stay on the same line?

I have HTML:

<nav>
    <ul>
        <li>Menu Item One</li>
        <li>Menu Item Two</li>
        <li>Menu Item Three</li>
    </ul>
</nav>

This style is like a horizontal menu. The number of links on my list is such that navigation should drop to two lines. But I do not want him to fall in the middle of the middle. This means that since my links are verbose, it usually falls in the middle of the element. Any way to do this that forces the next line to always be in place between items <li>?

+3
source share
3 answers

just add css white-space:nowrap;to the folder

+4
source

, li- , :

<nav>
    <ul>
        <li>Menu&nbsp;Item&nbsp;One</li>
        <li>Menu&nbsp;Item&nbsp;Two</li>
        <li>Menu&nbsp;Item&nbsp;Three</li>
    </ul>
</nav>
0
nav li {display:block; float:left; white-space:pre;}

See the interface here: http://jsfiddle.net/3h9Kw/

0
source

More articles:


All Articles