title: Variable width navbar
body: <p>Is there any way to make a variable width navbar, I don't know how to make variable the clickable area... <a href="http://jsfiddle.net/tirengarfio/a9ssC/" rel="nofollow">http://jsfiddle.net/tirengarfio/a9ssC/</a></p>
  
  <p>As you can see, now I have set a 50px <code>padding</code> to the <code>anchor</code> tag, but I would like it to be variable actually..</p>
  
  <p>This is the jsfiddle code:</p>
  
  <pre><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;   
  }
  </code></pre>