Html 拉伸 <a> 标签以填充整个 <li>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3264370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stretching <a> tag to fill entire <li>
提问by Pieter
Here's a simple menu structure:
这是一个简单的菜单结构：
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>
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>其拉伸以填充整个<li>. 我尝试使用类似的东西，width: 100%; height: 100%但没有效果。如何正确拉伸锚标签？
回答by Dave Markle
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”标签是内联级元素。任何内联级别元素都不能设置其宽度。为什么？因为内联级元素旨在表示理论上可以从一行换行到下一行的流动文本。在这种情况下，提供元素的宽度是没有意义的，因为您不一定知道它是否会换行。为了设置其宽度，您必须将其显示属性更改为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>
If memory serves, you canset the width on certain inline level elements in IE6, though. But that's because IE6 implements CSS incorrectly and wants to confuse you.
不过，如果没记错的话，您可以在 IE6 中设置某些内联级别元素的宽度。但那是因为 IE6 错误地实现了 CSS 并且想要迷惑你。
回答by bluesmoon
Just style the A with a display:block;:
只需为 A 设置样式display:block;：
ul#menu li a { display: block;}
回答by Christian Bonato
display:flex
is the HTML5 way.
是 HTML5 方式。
Useful to hack frameworks buttons, or any other element, but you may need to remove their padding first, and set them to the desired height.
用于破解框架按钮或任何其他元素，但您可能需要先删除它们的填充，然后将它们设置为所需的高度。
In this case, angular-material tabs, which are kind of tricky to make them work as a "standard" website nav.
在这种情况下，有角度的材料选项卡，使它们作为“标准”网站导航工作有点棘手。
Notice that the pointer changes as soon as you enter the tab : the < a > are now stretched to fit their parent dimensions.
请注意，一旦您进入选项卡，指针就会发生变化：<a> 现在被拉伸以适应它们的父尺寸。
Out of topic, notice how flawless angular-material displays the ripple effect, even on a "large surface".
题外话，请注意完美无瑕的角材料如何显示波纹效果，即使在“大表面”上也是如此。
.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%;
}
UPDATE 2018
2018 年更新
AngularJS Materialthrows a (gentle) warning when using flex on button elements, so don't assume all HTML elements/tags can handle display:flexproperly, or have a homogeneous behaviour across browsers.
当在按钮元素上使用 flex 时，AngularJS Material会抛出一个（温和的）警告，所以不要假设所有 HTML 元素/标签都可以display:flex正确处理，或者在浏览器之间具有同质的行为。
Remember to consult flexbugsin case of unexpected behaviour in a particular browser.
如果在特定浏览器中出现意外行为，请记住咨询flexbugs。
回答by Aidan Miles
A different approach:
一种不同的方法：
<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%;
}
This is helpful if the link's container also has images and such inside of it, or is of potentially different sizes depending on image / content size. With this, the anchor tag itself can be empty, and you can arrange other elements inside of anchor's container however you want. Anchor will always match the size of the parent, and will be on top, to make the entire liclickable.
如果链接的容器内部也有图像等，或者根据图像/内容大小可能具有不同的大小，这将很有帮助。有了这个，锚标签本身可以是空的，你可以根据需要在锚的容器内排列其他元素。Anchor 将始终与父级的大小匹配，并将位于顶部，以使整个li可点击。
回答by Michael
I used this code to fill the width and height100%
我使用此代码填充宽度和高度100%
HTML
HTML
<ul>
<li>
<a>I need to fill 100% width and height!</a>
</li>
<ul>
CSS
CSS
li a {
display: block;
height: 100%; /* Missing from other answers */
}
回答by Pranav B
Just changing the display property to block didn't work for me. I removed the padding of li and set the same padding for a.
只是将显示属性更改为阻止对我不起作用。我删除了 li 的填充并为 a 设置了相同的填充。
li a {
display:block;
padding: 4px 8px;
}
回答by niyas
Use line-heightand text-indentinstead of padding for lielement, and use display: block;for anchor tag
对li元素使用line-height和text-indent而不是 padding ，并用于锚标签display: block;
回答by Michael Philips
I wanted this functionality only on tab view i.e below 720px, so in media query I made:
我只想要这个功能在标签视图上，即低于 720px，所以在媒体查询中我做了：
@media(max-width:720px){
a{
display:block;
width:100%;
}
}
回答by Jake
<!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>
You should try to avoid using a class on every tag so your content remains easy to maintain.
您应该尽量避免在每个标签上使用一个类，以便您的内容易于维护。
回答by Jnr
If your <li>s had to have a specific height then your <a>s would only stretch to the <li>'s width and not the height anymore.
One way I solve this is to use CSS display:blockand add paddings to my <a>s
OR
wrap the <a>s around the <li>s
如果你的<li>s 必须有一个特定的高度，那么你的<a>s 只会延伸到<li>的宽度而不是高度。我解决这个问题的方法之一是使用CSS display:block，并添加垫衬我的<a>S或包裹<a>周围的S<li>小号
<ul id="menu">
<a href="javascript:;"><li>Home</li></a>
<a href="javascript:;"><li>Test</li></a>
</ul>
