title: Stretching <a> tag to fill parent <li> in horizontal list
body: <p>Here's my (abstracted) css and HTML:</p>
  
  <pre><code>#primary-menu{
  text-align: center;
  margin: 20px 0;
  }
  
  #primary-menu li{
  list-style-type:none;
  display: inline;
  margin: 8px;
  padding: 5px 30px;
  }
  
  #primary-menu ul{
  padding: 20px 0px;
  }
  
  &lt;div id="primary-menu"&gt;
  &lt;ul id="main-menu"&gt;
  &lt;li&gt;&lt;a href="one"&gt;one&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="two"&gt;two&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="three"&gt;three&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried putting <code>#primary-menu a{display:block;}</code> and taking out <code>display: inline;</code> and adding in <code>float:left;</code> in <code>#primary-menu li</code> but then the list shifts down the page and moves outside of the containing div, plus it doesn't seem like it keeps the <code>&lt;a&gt;</code> streached after I put <code>float:left;</code> in. </p>
  
  <p>Another option I know of would be to change the list to look like <code>&lt;a href="one"&gt;&lt;li&gt;one&lt;/li&gt;&lt;/a&gt;</code> but I wouldn't really want to do this because (apart from it feeling very hacky) this list is being created by Drupal and I wouldn't really know how to do this without having to learning how the API works, which doesn't seem worth it for this one problem.</p>
  
  <p>All help would be welcome. Thanks.</p>