Question

Here’s my (abstracted) css and HTML:

#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;
}

<div id="primary-menu">
<ul id="main-menu">
<li><a href="one">one</a></li>
<li><a href="two">two</a></li>
<li><a href="three">three</a></li>
</ul>   
</div>

I’ve tried putting #primary-menu a{display:block;} and taking out display: inline; and adding in float:left; in #primary-menu li but then the list shifts down the page and moves outside of the containing div, plus it doesn’t seem like it keeps the <a> streached after I put float:left; in.

Another option I know of would be to change the list to look like <a href="one"><li>one</li></a> 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.

All help would be welcome. Thanks.

Answer 1

If I get it right, then you just have to remove the padding from the li element and add it to the a. Also you have to change the display type:

#primary-menu li{
  list-style-type:none;
  display: inline-block;
  margin: 8px;
}

#primary-menu li a {
   padding: 5px 30px;
   display:block;
}

See: http://jsfiddle.net/v6ZFx/