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>，但我真的不想这样做，因为（除了感觉非常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/

Answer 2

ID应该是唯一的。而是使用类。永远不要将块元素放在内联元素中。 li {display：inline-block;宽度：自动;填充：0}

现在您可以将a_s的宽度设置为完整大小。或者在li元素上设置宽度。

拉伸<a> tag to fill parent <li> in horizontal list</li></a>

2 个答案: