How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

The Solution to How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container is


Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don't have to work out % widths for each list item

_x000D_
_x000D_
    #nav {_x000D_
        text-align: justify;_x000D_
        min-width: 500px;_x000D_
    }_x000D_
    #nav:after {_x000D_
        content: '';_x000D_
        display: inline-block;_x000D_
        width: 100%;_x000D_
    }_x000D_
    #nav li {_x000D_
        display: inline-block;_x000D_
    }
_x000D_
<ul id="nav">_x000D_
    <li><a href="#">HOME</a></li>_x000D_
    <li><a href="#">ABOUT</a></li>_x000D_
    <li><a href="#">BASIC SERVICES</a></li>_x000D_
    <li><a href="#">OUR STAFF</a></li>_x000D_
    <li><a href="#">CONTACT US</a></li>_x000D_
</ul>
_x000D_
_x000D_
_x000D_

FIDDLE

~ Answered on 2013-07-30 15:29:48


Most Viewed Questions: