这是一个简单的菜单结构：
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>
我希望<a> 被拉伸，以填满整个<li>。我尝试使用width: 100%; height: 100% 之类的东西，但没有效果。如何正确拉伸锚标记？
【问题讨论】：
“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，想迷惑你。
【讨论】：
display:block;，宽度就不再需要了。
只需将 A 设置为 display:block;：
ul#menu li a { display: block;}
【讨论】：
display:flex
是 HTML5 的方式。
对破解框架按钮或任何其他元素很有用，但您可能需要先删除它们的填充，然后将它们设置为所需的高度。
在这种情况下，角度材料选项卡，要使其作为“标准”网站导航工作有点棘手。
请注意，一旦您进入选项卡，指针就会发生变化： 现在被拉伸以适合其父尺寸。
题外话，请注意完美的棱角材料如何显示波纹效果，即使在“大表面”上也是如此。
.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。
【讨论】：
另一种方法：
<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 可点击。
【讨论】：
我用这段代码填充宽度和高度 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 */
}
【讨论】：
只是将显示属性更改为阻止对我不起作用。 我删除了 li 的填充并为 a 设置了相同的填充。
li a {
display:block;
padding: 4px 8px;
}
【讨论】：
<!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>
您应该尽量避免在每个标签上都使用一个类，这样您的内容仍然易于维护。
【讨论】：
display: block; 解决方案（一个被认为是正确的）。那么，您复制现有答案的充分理由是什么（带有微小更改）？？？
使用 line-height 和 text-indent 代替 li 元素的填充，并使用 display: block; 作为 anchor 标签
【讨论】：
我希望这个功能只在标签视图上，即低于 720 像素，所以在媒体查询中我做了：
@media(max-width:720px){
a{
display:block;
width:100%;
}
}
【讨论】：
如果你的<li>s 必须有一个特定的高度，那么你的<a>s 只会延伸到<li> 的宽度而不是高度。
我解决这个问题的一种方法是使用 CSS display:block 并将填充添加到我的 <a>s
要么
将<a>s 包裹在<li>s 周围
<ul id="menu">
<a href="javascript:;"><li>Home</li></a>
<a href="javascript:;"><li>Test</li></a>
</ul>
【讨论】：