拉伸< a>标签填充整个< li> [英] Stretching <a> tag to fill entire <li>

问题描述

以下是一个简单的菜单结构：

Here's a simple menu structure:

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

我想要< a> 以便它填满整个< li> 。我尝试使用像 width：100％; height：100％但是没有效果。如何正确伸展锚点标签？

I want the <a> to be stretched so that it fills the entire <li>. I tried using something like width: 100%; height: 100% but that had no effect. How do I stretch the anchor tag correctly?

推荐答案

a标签是内联层次元素。没有内联级元素可以设置其宽度。为什么？因为内联级元素意在表示流动文本，这在理论上可以从一行到下一行。在这种情况下，提供元素的宽度没有意义，因为你不一定知道它是否会包装。要设置其宽度，必须将其显示属性更改为 block 或 inline-block ：

The "a" tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn't make sense to supply the width of the element, because you don't necessarily know if it's going to wrap or not. In order to set its width, you must change its display property to block, or 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，并且想要混淆你。

If memory serves, you can set the width on certain inline level elements in IE6, though. But that's because IE6 implements CSS incorrectly and wants to confuse you.

这篇关于拉伸< a>标签填充整个< li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！