拉伸<a>标签以在水平列表中填充父<li>

Question

这是我的(抽象的)CSS和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>

我试图把#primary-menu a{display:block;}和取出display: inline;,并加入float:left;在#primary-menu li后来列表向下移动网页和包含分区以外的动作,再加上它似乎并不像它使<a>我把后streached float:left;英寸

我知道的另一个选项是改变列表看起来像<a href="one"><li>one</li></a>但我真的不想这样做因为(除了感觉非常hacky)这个列表是由Drupal创建的,我真的不知道该怎么做这不需要学习API如何工作,这对于这个问题似乎不值得.

欢迎所有帮助.谢谢.

Answer 1

如果我做对了,那么你只需要从li元素中删除填充并将其添加到a.您还必须更改显示类型:

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

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

请参阅:http://jsfiddle.net/v6ZFx/