Question

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

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

我希望<a>被拉伸，以便它填满整个<li>。我尝试使用像width: 100%; height: 100%这样的东西，但没有效果。如何正确拉伸锚标签？

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，并且想让你迷惑。

Answer 2

只需使用display:block;：

设置A的样式

ul#menu li a { display: block;}

Answer 3

display:flex

是HTML5方式。

<强> See Fiddle

用于破解框架按钮或任何其他元素，但您可能需要首先删除它们的填充，并将它们设置为所需的高度。

在这种情况下，角质材料标签，这使得它们作为标准＆＃34;网站导航。

请注意，一旦您进入选项卡，指针就会改变：＆lt; a＆gt;现在拉伸以适合其父级尺寸。

超出主题，请注意无瑕角度材料如何显示涟漪效果，即使在大面积上也是如此。

.md-header{
/* THIS IS A CUSTOM HEIGHT */
    height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

md-tab{    
    padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

a{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%; 
}

更新2018年

AngularJS Material在按钮元素上使用flex时会发出（温和）警告，因此不要假设所有HTML元素/标记都能正确处理display:flex，或者在浏览器中具有同质行为。

如果特定浏览器出现意外行为，请务必咨询flexbugs。

Answer 4

另一种方法：

<ul>
    <li>
        <a></a>
        <img>
        <morestuff>TEXTEXTEXT</morestuff>
    </li>
</ul> 

a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: [higher than anything else inside parent]
    width:100%;
    height: 100%;
}

如果链接的容器中还有图像等内容，或者根据图像/内容大小可能具有不同的大小，这将非常有用。有了这个，锚标签本身可以是空的，你可以根据需要在锚的容器内安排其他元素。 Anchor将始终与父级的大小相匹配，并且位于顶部，以使整个li可点击。

Answer 5

我使用此代码填充宽度和高度 100％

<强> HTML

<ul>
    <li>
        <a>I need to fill 100% width and height!</a>
    </li>
<ul>

<强> CSS

li a {
   display: block;
   height: 100%; /* Missing from other answers */
}

Answer 6

仅将display属性更改为block对我不起作用。我删除了li的填充，并为a设置了相同的填充。

  li a {
        display:block;  
        padding: 4px 8px;  

  }

Answer 7

<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
    display:block;
}
</style> 
</head>
<body>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">Test</a></li>
    </ul>
</body>
</html>

您应该尽量避免在每个代码上使用类，以便您的内容易于维护。

Answer 8

使用 line-height 和 text-indent 代替 li 元素的填充，并使用display: block;代替锚标记

Answer 9

我只想在标签视图中使用此功能，即低于720px，因此在媒体查询中我做了：

@media(max-width:720px){
  a{
    display:block;
    width:100%;
  }
}

Answer 10

如果<li>必须具有特定的高度，那么<a> s只会延伸到<li>的宽度，而不再是高度。我解决这个问题的一种方法是使用CSS display:block并向我的<a>添加填充要么围绕<a> s

包裹<li> s

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

拉伸<a> tag to fill entire <li></li></a>

10 个答案: