Already Defined LI size but i want the space between the LI's to stretch full width size of menu?

Question

I want my LI's to automatic adjust the margin to the left and right so it fits the whole menu div.

(a little drawing of what i im trying to explain) Im at A, i want to go to B. http://madsthines.dk/files/aid.jpg

---

<ul>
    <li>ListOne</li>
    <li>ListTwo</li>
    <li>ListThree</li>
    <li>ListFour</li>
    <li>ListFive</li>
</ul>

---

Padding: 5px; 
width and height are defined by the font size

I want the margin between those LI's to be stretch out to the full size of the div below them.I realised that Firefox, Internet Explorer and Chrome reads margin differently. E.g. If i define it with 10px margin to the right and left it will fit in Chrome but not in Firefox.

Is there anyway to let the margin define itself by the width of the UL?

Ask away if i didn't make myself clear enough. Thank you!!

Answer 1

If you have a set number of LI then you could set their width by calculating:

100% / NumberOfLI = Width% .

So 5 <LI> would be (100% / 5) = 20%

Of course this might not be an ideal situation if the total pixels of your <LI> are greater than 100% of the <UL>

Edit:

Sorry I forgot to know that the <LI> should be floated

<style>

UL{
   position:relative;
   width:100%;
}

UL LI{
   display: inline;
   width: 20%;
   position:relative;
   float:left;
}

</style>

Your CSS would look something basic like this for 5 <LI> inside of an unordered list.

Answer 2

Check out this question. It looks similar to what you are looking to accomplish. Stretch horizontal ul to fit width of div