CSS 使链接具有 100% 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4861230/
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
Make a link have 100% width
提问by Jason94
I have a box that is X px wide. And in it i have a list (<ul>) with link elements (<li><a ..></a><li>)
我有一个 X px 宽的盒子。在其中我有一个<ul>带有链接元素 ( <li><a ..></a><li>)的列表( )
How can i with CSS make the link clickable outside the text and in 100% width of the box. Making each line in the box clickable :D
我如何使用 CSS 使链接在文本外和框的 100% 宽度内可点击。使框中的每一行都可点击：D
回答by Scott Brown
Add display: blockto your atag.
添加display: block到您的a标签。
回答by EKons
I agree with Scott, but I would recommend this code instead:
我同意 Scott，但我会推荐以下代码：
a {
display: inline-block;
width: 100%;
}
or this code:
或此代码：
<ul>
<li><a href="topage" style="display: inline-block">text</a></li>
</ul>
I recommend display: inline-blockbecause display: blockmakes the <a>element appear in its line. (Both will be fine in this case, but not in all cases)
我推荐display: inline-block因为display: block使<a>元素出现在它的行中。（在这种情况下两者都可以，但并非在所有情况下）
Edit: It seems that width:100%was not referenced. Thanks to @LGSon for commenting out!
编辑：似乎没有width:100%被引用。感谢@LGSon 发表评论！
回答by Jesper Lehtinen
To make the link fill out all available space, you can use flexbox:
要使链接填满所有可用空间，您可以使用 flexbox：
li {
display: flex;
}
li > a {
flex: 1;
}
回答by Yoldosh
item {display:flex;} item a {flex:none;}
