css - 拉伸(stretch) 标签以填充水平列表中的父级

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但随后列表向下移动页面并移动到包含的 div 之外，而且它似乎没有保留 <a>。我把 float:left; 后弄脏了中。

我知道的另一个选择是将列表更改为 <a href="one"><li>one</li></a>。但我真的不想这样做，因为(除了感觉很老套之外)这个列表是由 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/