Can I give 100% width to a list?

HTML & CSS
1

I have an unordered inline list with items. I want these items to stretch across the page within it’s div. Basically the first <li> will be on the far left. The last <li> will be on the far right. Everything else will be eventually spaced in between.

How can I do this. Is it possible? Here’s an example of how it looks currently when NOT WORKING:

http://picasaweb.google.com/lh/photo/miVMav9bdEiC7A-wJaF3u10-UsTuFCvTfeuOKBM-tes?feat=directlink

This is the working version:

http://picasaweb.google.com/lh/photo/fxYDc7GqAoH4Jwx98GokNF0-UsTuFCvTfeuOKBM-tes?feat=directlink

Suggestions?

2

Sorry but I’m not a wordpress user so can’t help with that. If you can’t apply the class to the last list element the the technique I mentioned above won’t work. You could use :last-child to target the last list element but it’s not well enough supported in browsers yet to use.

You may just have to settle for padding them out a bit to space them out and centered.

3

You could horizontally position each of the <li>s with a % to get them in the right place - but this is seriously messy. You would have to figure out exactly what % would get them to line up right, and then re-calculate any time you changed the content, and also be absolutely sure that you will never have more content than can fit on a single line. And that is nigh-on impossible, unless you are determined to make a lock-down design that is completely inflexible and therefore is hard and unrewarding to use.

4

That’s a pretty common thing to do. The simplest approach is to add float: left to the <li>s and then to put left and right paddings/margins on them to space them out. If you want a more specific answer, perhaps post the code you are working with and we can style it as shown in the image.

5

Let me see if I understand. Are you suggesting paddings and margins on the <li>s individually to get the right balance? I suppose that’s a method. I wasn’t sure if there’s a way to use text-align: center or something like that.

6

Hm. I may doing something wrong. Also I’m populating this list from wordpress from their menu function. So that’s an issue. I’m not sure how to apply classes to specific < li >s within the function so that may be the real problem. Ultimately I don’t seem able to pull it off.

7

this is a cheat, but if you are using WP … you could get a count of the LIs and add aclass to the container UL ( or div). and have several ready styles. Example:

.width1 li {width:100%}
.width2 li {width:50%}
… and so forth

and some PHP like
<? $wdth=(the method from your tag that gives you the # of LIs);?>
<ul class=“width<? echo $wdth?>”>…</ul>

( actually, you could GET the # ofLIs and have WP write the .width LI{} rule in the header.php template}

<? $wdth=(the method from your tag that gives you the # of LIs);
$wdth= floor(100/$wdth);
echo “<style> .width li{width:$wdth;} </style>”;
?>
then on your actual html page code just set the container class to “width” manually…
something to that effect.

8

Hi,

You may be interested in an old CSS quiz which posed a similar problem. The solution is given around post 40.

This was Erik J’s solution but refer to the quiz for the why and wherefore.


<!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>

Of course for IE8 and other modern browsers you could use the display table and table-cell properties instead (of which there is an example in the quiz also I believe) .

9

I wasn’t thinking individual margins and paddings; rather, a set amount of padding for all LIs (or you could put the padding on the <a>s within them.

You certainly could use text-align:center though. You just need to give your LI’s a width… and measure them out to fit the width of the container. That might be a better approach in your case, since you want the LIs to stretch from one side to t’other.