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
#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_
~ Answered on 2013-07-30 15:29:48