Variable width navbar - css

Question

Is there any way to make a variable width navbar, I don't know how to make variable the clickable area... http://jsfiddle.net/tirengarfio/a9ssC/
As you can see, now I have set a 50px padding to the anchor tag, but I would like it to be variable actually..
This is the jsfiddle code:
ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height:20px;
background-color:red;
border:2px solid;
}
li {
float: left;
width: 50%;
text-align:center;
}
a {
padding: 0 50px;
}

Answer 1

Try this one:
HTML
<div class="nav">
<ul>
<li>1jkflasd</li>
<li>2jkflasd</li>
<li>3jkflasd</li>
<li>4jkflasd</li>
<li>5jkflasd jffjadj faljdf aljf adjf ladjf lkdjf alsjdf ldsjf ldsjf </li>
<li>6jkflasd</li>
<li>7jkflasd</li>
</ul>
</div>
CSS
.nav {
display: table;
width: 100%;
}
ul {
list-style: none;
display: table-row;
padding: 0;
margin: 0;
width: 100%;
height:20px;
background-color:red;
border:2px solid;
}
li {
display: table-cell;
padding: 5px;
text-align: center;
}
The trick here is using the table as values of display in CSS.
Demo
http://jsfiddle.net/jlratwil/4srb6/1/

Answer 2

You can handle it with table, hacking css by javascript. Or you can use CSS3 also.
If you work with CSS3 your code should like this:
<style>
ul{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
width:300px;
border:1px solid black;
}
li {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
</style>
<ul>
<li>jkflasd</li>
<li>jkflasd</li>
<li>jkflasd</li>
</ul>
You can read more about flexbox at here: http://www.w3schools.com/cssref/default.asp#flexbox