Html 如何使 <a> 标签的大小与它的父 <li> 标签一样大，以实现更大的可点击区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7019231/
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
How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
提问by Alexa Green
I would like to do this so that the clickable region on the tag is size of the LI.
我想这样做，以便标签上的可点击区域是LI.
My html looks like:
我的 html 看起来像：
<li>
<a href="#">Link</a>
</li>
回答by Ola Tuvesson
As others have said
正如其他人所说
li a { display: block; }
should achieve what you're after. Butyou must also remove any padding from the <li> and set it on the <a> instead. For example:
应该达到你所追求的。但是您还必须从 <li> 中删除任何填充并将其设置在 <a> 上。例如：
li { padding: 0; }
li a { display: block; padding: 1em; }
回答by Jared Farrish
In CSS:
在 CSS 中：
li a {
display: block;
}
Of course, you'll want to make your selector more specific than that.
当然，您需要使选择器更具体。
<ul>
<li class="myClass">
<a href="#">Link</a>
</li>
</ul>
li.myClass a {
display: block;
background-color: #fdd; /* Demo only */
}
回答by Seth
This will make the entire area clickable.
这将使整个区域可点击。
li a { display: block; }
回答by Matoeil
li a{
display: inline-table;
height:95%;
width: 95%;
}
the 95 to anticipate any li margin or padding
95 预测任何 li 边距或填充
回答by irockman
Try this css
试试这个css
li{
border:1px solid black;
height:40px;
}
li a{
border:1px solid red;
display:block;
height:100%;
}
li{
border:1px solid black;
height:40px;
}
li a{
border:1px solid red;
display:block;
height:100%;
}
回答by Samantha Dove
If you currently have this same question you can simply add padding to the right place:
如果您目前有同样的问题，您可以简单地将填充添加到正确的位置：
li {
//remove any padding or margin attributes from here
}
li a {
display: block;
padding: 20px; //or however big you want the clickable area to be
}
Anchor tags are by default inline elements, so you have to explicitly change them to display as block elements before you can mess with the padding or the margins.
锚标记默认是内联元素，因此您必须明确更改它们以显示为块元素，然后才能弄乱填充或边距。
Hope this helps!
希望这可以帮助！
回答by vaskort
Just another option I used is create a transparent png image in photoshop and put it inside the anchor tag, make its position absolute and increase its dimensions to fit that parent div you want and you could have a large clickable area.
我使用的另一个选项是在 photoshop 中创建一个透明的 png 图像并将其放在锚标签中，使其位置绝对并增加其尺寸以适合您想要的父 div，并且您可以拥有一个大的可点击区域。
<a href="test.html" />
<img id="cover_img" src="cover.png" />
</a>
#cover_img {
display: block;
height: 200px;
width: 193px;
position: absolute;
}
Might be useful in certain circumstances.
在某些情况下可能有用。
