css – 在水平列表中拉伸标签以填充父>

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

我已经尝试将#primary-menu设置为{display：block;}并取出display：inline;并加入浮动：左;在#primary-menu li中然后列表向下移动页面并移动到包含div之外,加上它似乎不保持< a>我把浮动：左;在.

我知道的另一个选项是将列表更改为< a href =“one”>< li> one< / li>< / a>但我真的不想这样做,因为(除了它感觉非常hacky)这个列表是由Drupal创建的,我不知道如何做到这一点,而不必学习API是如何工作的,这不是对于这个问题似乎是值得的.

欢迎所有帮助.谢谢.

最佳答案

如果我做对了,那么你只需要从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/