Html 拉伸<；a>；标记以填充整个<；李>；

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

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

我希望将

拉伸，使其填满整个

。我试着使用

width:100%；身高：100%

，但这没有效果。如何正确拉伸锚点标记？

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

块

，或

内联块

：

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>

a.wide{
显示：块；
}
...

---

如果内存可用，您可以在IE6中设置某些内联级元素的宽度。但这是因为IE6不正确地实现了CSS，并想让您感到困惑。

只需使用

display:block：

ul#menu li a { display: block;}


#宽里a{
显示：块；
}





您应该尽量避免在每个标记上使用类，以便您的内容保持易于维护。
如果您的
必须具有特定的高度，则您的


另一种方法：

<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%;
}  



文本


a{
位置：绝对位置；
排名：0；
左：0；
z指数：[高于父级中的任何其他值]
宽度：100%；
身高：100%；
}  

如果链接的容器中也有图像等，或者根据图像/内容的大小可能有不同的大小，则这将非常有用。这样，锚点标记本身就可以是空的，您可以根据需要在锚点容器中安排其他元素。锚点将始终与父对象的大小匹配，并位于顶部，以使整个
li
可单击。
我使用此代码填充宽度和高度100%

HTML

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

是HTML5的方式


这对于破解框架、按钮或任何其他元素都很有用，但您可能需要先删除它们的填充，然后将它们设置为所需的高度

在这种情况下，角材质选项卡，这是一种棘手的工作，使他们作为一个“标准”网站导航

请注意，一旦进入选项卡，指针就会发生变化：现在被拉伸以适合其父维度

不在主题范围内，请注意，即使在“大表面”上，完美无瑕的棱角材质也会显示涟漪效果

2018年更新

在按钮元素上使用flex时抛出一个（温和的）警告，因此不要假设所有HTML元素/标记都可以正确处理
display:flex
，或者在浏览器中具有相同的行为

请记住，如果在特定浏览器中出现意外行为，请咨询。
使用行高和文本缩进代替li元素的填充，并使用
显示：块对于锚定标记
我只想在选项卡视图上使用此功能，即低于720px，因此在媒体查询中我做了：

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

只是将“显示”属性更改为“块”对我不起作用。
我删除了li的填充，并为a设置了相同的填充

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

  }

实际上，一旦设置了
display:block，宽度不再是必需的。边距和填充是什么？哈，因为我原来有宽度：100%。不需要回答这个问题。编辑。谢谢Ben.lol：但那是因为IE6不正确地实现了CSS，并且想让您感到困惑。请注意，“display:flex；”也可以工作。添加“对齐内容”、“对齐项目：居中”和“高度：100%；”，您应该适合父元素维度。嗯，我们已经有两个类似的
显示：块解决方案（一个被认为是正确的）。那么，您复制现有答案的好理由是什么（带有微小的更改）？？将a标记包装在li标记周围是不好的做法，因为它是无效的html
li a {
   display: block;
   height: 100%; /* Missing from other answers */
}

display:flex

.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%; 
}

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

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

  }