Can I give 100% width to a list?

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:

This is the working version:


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.

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.

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.

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.

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.

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.


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.

<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,">
<style type="text/css">
.nav {
    border:3px outset #66f;
    font:bold 88%/1.1 verdana;
.nav li {
.nav li.last {
.nav li a {
    padding:13px 4px 0;
.nav li a:hover {
    border:3px inset #66f;

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


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) .

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.