小编典典

拉伸<a>标签以填充整个<li>

css

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

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

我希望将<a>其拉伸以使其充满整个<li>。我尝试使用类似的方法,width: 100%; height: 100%但是没有效果。如何正确拉伸锚标签?


阅读 716

收藏
2020-05-16

共1个答案

小编典典


a”标签是内联级别元素。没有内联级别元素可以设置其宽度。为什么?因为内联级别的元素是要表示流畅的文本的,所以理论上可以从一行换行到另一行。在这种情况下,提供元素的宽度是没有意义的,因为您不一定知道它是否要包装。为了设置其宽度,您必须将其显示属性更改为blockinline- 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,并想让您感到困惑。

2020-05-16