UL List Horizontal Menu item width?

I’m trying to figure how to get an ul list of items evenly spaced across the width of the page. My page is 720px and I have 2 menus, one with 4 items and the other with 11 items. Is there some kind of trick or formula to figure this out? I’m presently using padding on each item and the list is set to display inline, but it still seems to be just a guess. Any help would be greatly appreciated.

jodmcc :frowning:

Yeah, I use float because it works. I find display: inline far less reliable.

Just because some tutorials show it doesn’t mea it’s the best :). I prefer floats for items next to each other, even though some bugs may come with it, just because those bugs are all easy to fix when you recognize them, you ca mess with box model properties such as width/height/padding/margins (which display:inline can’t) and overall it’s just more fun to work with :).

You can give the list items a set width, so for the first—

width = 720px ÷ 4 = 180px

and for the second—

width = 720px ÷ 11 = 65px (small remainder of 5px)

I’m presently using padding on each item and the list is set to display inline

I would recommend using float: left instead.

Is there any reason why I should float the items? Just curious since most of the tutorials on menus are using display: inline.

There is no easy way to evenly distribute elements across the width of a parent (apart from using a table of course - which nearly does that).

We did have a css quiz that shows how to do it but is quite complicated to understand.

Here was the answer from the quiz:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distributed Horizontal Menu</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
.nav {
    margin:auto;
    border:3px outset #66f;
    padding:0;
    min-width:42em;
    width:95&#37;;
    height:44px;
    overflow:hidden;
    background:#039;
    text-align:justify;
    font:bold 88%/1.1 verdana;
}
.nav li {
    display:inline;
    list-style:none;
}
.nav li.last {
    margin-right:100%;
}
.nav li a {
    display:inline-block;
    padding:13px 4px 0;
    height:31px;
    color:#ddd;
    vertical-align:middle;
    text-decoration:none;
    text-transform:capitalize;
}
.nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ff6;
    background:#36c;
}
</style></head><body>

<ul class="nav">
<!--[test to comment out random items]
    <li>&nbsp; <a href="#">netscape&nbsp;9</a></li>
[the spacing should be distributed]-->
    <li>&nbsp; <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
    <li>&nbsp; <a href="#">opera&nbsp;10</a></li>
    <li>&nbsp; <a href="#">firefox&nbsp;3</a></li>
    <li>&nbsp; <a href="#">safari&nbsp;4</a></li>
    <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp; &nbsp;</li>
</ul>

</body></html>

It uses text-align:justify and some negative margin trickery to make it work.