How can I achive equal responsive padding for navigation elements? - html

Question

I'm trying to create horizontal navigation bar, that fills out the screen, or parent container and will have equal horizontal padding for elements, that will equally reduce on smaller window width. Using display:table-cell I have got to the point that it nicely reduces but is not equal. Longer titles have more padding. I'm open to any working solutions, ideally css but if that is not possible, than anything that will work without glitches. What i have so far can be seen here
ul {
list-style:none;
padding:0;
width:100%;
display:table;
border-top:1px solid;
border-bottom:1px solid;
border-left:1px solid
}
li {
border-right: 1px solid;
margin:0;
display:table-cell;
position:relative;
text-align:center
}
<ul>
<li>some title</li>
<li>some longer title</li>
<li>some title</li>
</ul>
http://jsfiddle.net/xZ6q3/16/

Answer 1

Solved it (and learned a lot). The basic idea is to run through all list items and calculate the average padding. Then run through them again and set their width to their text width + average padding.
Heres the updated jsfiddle: http://jsfiddle.net/xZ6q3/21/
// calculate the average padding
var totalPadding = 0;
var count = 0;
$('li').each(function(){
var t = $(this);
var outer = t.outerWidth(true);
var inner = t.textWidth();
var padding = outer - inner;
totalPadding += outer - inner;
count++;
});
totalPadding /= count;
// set each width to text width + average padding
$('li').each(function(){
var t = $(this);
var inner = t.textWidth();
var newWidth = inner + totalPadding;
t.css('width', newWidth);
});
To make it work, I had to use Phil's textWidth() and listen to window resize events. See the jsFiddle.

Answer 2

Try this
ul {
border-bottom: 1px solid;
border-left: 1px solid;
border-top: 1px solid;
display: inline-block;
list-style: none outside none;
padding: 0;
}
li {
border-right: 1px solid;
display: inline-block;
margin: 0;
padding: 0 17px;
position: relative;
text-align: center;
}

Answer 3

First, I would go for float:left property and then change values for different screen resolutions.
ul li {
float:left;
padding-left: 15px;
padding-right: 15px;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
ul li {
padding-left: 5px;
padding-right: 5px;
}
}