Spread list items evenly with equal padding (preferably without JavaScript) - html

Question

I'm trying to make an HTML/CSS only <ul> layout in which the <li> items are evenly spread over the available width, and the padding between <a> and <li> elements are all the same. Here's my HTML-code (not very exciting):
<ul>
<li>item 1</li>
<li>item 2 with long name</li>
<li>item 3</li>
</ul>
The result should look like this:
The x of course represents the amount of padding, which is the same for every item in the list.
I tried to use display: table, but this doesn't give the desired result. When using display: table the spacing between the <li> items depends on the length of the text within the <a> element, so x is different for every element.
Since the available width and the amount of <li> items are variable, what is the best way to determine the value of x? I also also want x to have a maximum value of 100px, in this case the width of the <ul> isn't the same as the available width.
I presume this is possible with JavaScript, but since there's already a lot of JavaScript on the page I don't want to use anymore JavaScript than necessary. So I prefer a CSS/HTML only solution.

Answer 1

Here's the JavaScript i'm using:
var containerWidth = $('ul').outerWidth();
var liWidthTotal = 0;
$('li').each(function() {
liWidthTotal += $(this).outerWidth();
});
var padding = Math.round((containerWidth - liWidthTotal) / ($('.topNav > div > ul > li').length*2));
$('.li > a').each(function() {
$(this).css('padding', '0px ' + padding + 'px');
});
I'm basically checking how much space is available to fill (width of ul - width of li) and spread that equally to all A-Tags as padding. Why to the a-tags? So your hover effekts fill the whole width of that element. You can also give it to the LI's of course.
Of course you need to adjust your selectors in the jQuery call.
If you made your LI's inline-block you should also either write them in one line or give them float: left to prevent white-space between them.
In my example your UL needs to fill the whole width (display: block).

Answer 2

See this fiddle, you want to use display:table-cell; on the list items, and display:table; on the list element. On each list item then do padding: 0 100px;
CSS:
body{
margin:0;
padding:0;
width:100%;
}
ul{
margin:0;
padding:0;
width:100%;
display:table;
}
li{
border:1px solid red;
padding:0 100px;
text-align:center;
display:table-cell;
}

Answer 3

html
<ul>
<li>bipin</li>
<li>bipin kumar pal</li>
<li>pal</li>
</ul>
css
ul{
width:100%;
display:table;
}
li{
border:2px solid green;
display:table-cell;
text-align:center;
}
And see this link http://jsfiddle.net/bipin_kumar/t2B4B/5/

Answer 4

I just edited the below fiddles to match your requiremens.Try this fiddle : http://jsfiddle.net/t2B4B/9/
CSS:
body{
margin:0;
padding:0;
width:100%;
}
ul{
margin:0;
padding:0;
width:100%;
display:table;
}
li{
border:1px solid red;
padding-left:20px;
padding-right:20px;
display:table-cell;
}