Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Spread 3 <li>'s out evenly on the horizontal

Status
Not open for further replies.

revz

Technical User
Apr 18, 2001
10
0
0
GB
With the below, I am trying to achieve a horizontal navigation bar which spreads the 3 list items out evenly.

The desired layout works in IE 6 but not in any of the Moz/Netscapes.


<html>
<style>
.itemlist {
width: 100%;
background: #ccc;
text-align: center;
}

.itemlist li {
width: 33%;
border: blue 1px solid;
display: inline;
text-align: center;
}
</style>
<body>
<ul class="itemlist">
<li>Back</li>
<li>Save and Quit</li>
<li>Next</li>
</ul>

</body>

</html>
 
Hmm, try adding the class element to the li directly? Worth a shot, sometimes you have to be really direct.
 
You actually never told us what doesn't work. Chris' solution will probably do the trick, here's just a little insight at what you were doing wrong. Inline elements (your defined <li>s) cannot have width defined. IE incorrectly applies width to them, so your layout was ok there. Strict browsers ignore the width. You can help yourself with paddings and margins but you cannot have a fixed width for inline elements. Chris transformed elements to block and then it works. Actually, when you float an object its display automatically changes to block, so giving it float: left; is enough.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top