html - 拉伸(stretch) <a> 标签以填充整个 <li>

Question

这是一个简单的菜单结构:

<ul id="menu">
  <li><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">Test</a></li>
</ul>

我想要 <a>被拉伸(stretch)以填满整个 <li> .我尝试使用类似 width: 100%; height: 100% 的东西但这没有效果。如何正确拉伸(stretch) anchor 标签？

Answer 1

“a”标签是内联级别元素。任何行内级别元素都不能设置其宽度。为什么？因为行内级别元素旨在表示流动文本，理论上可以从一行换行到下一行。在这些情况下，提供元素的宽度没有意义，因为您不一定知道它是否要换行。为了设置其宽度，您必须将其显示属性更改为block，或inline-block:

a.wide {
    display:block;
}

...

<ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide" href="javascript:;">Test</a></li>
</ul>

不过，如果没记错的话，您可以在 IE6 中的某些内联级元素上设置宽度。但那是因为 IE6 错误地实现了 CSS 并且想要混淆你。