forcing menus to take up 100% of width

Question

I have this top bar menu:

http://yoursdproperty.com/

I need to have the text always take up 100% of the width. how do i do this?

if I add more links i want the sizing to be dynamic

any ideas?

Answer 1

It depends on your browser requirements: For modern browsers you can do something like:

ul {
    display: table;
}
li {
    display: table-cell;
}

for older browser compatibility you might have to use a real table.

Answer 2

you can just not specify the width or set it to auto

Answer 3

specify a width as a percentage.

<ul>
    <li>something</li>
    <li>something</li>
    <li>something</li>
    <li>something</li>
<ul>

ul li {
    width:25%;
    display:inline;
}