CSS-使链接的宽度为100%

我有一个X像素宽的盒子。 在其中我有一个带有链接元素的列表(<ul>)(<li><a ..></a><li>

我如何使用CSS使链接在文本外部和框的100%宽度中可单击。 使框中的每一行都可点击:D

Jason94 asked 2020-06-29T17:39:37Z
4个解决方案
136 votes

display: block添加到您的a标签。

Scott Brown answered 2020-06-29T17:40:02Z
17 votes

我同意Scott的观点,但我建议使用以下代码:

a {
    display: inline-block;
    width: 100%;
}

或此代码:

<ul>
    <li><a href="topage" style="display: inline-block">text</a></li>
</ul>

我建议使用width:100%,因为display: block使<a>元素出现在其行中。 (在这种情况下都可以,但并非在所有情况下都可以)

编辑:似乎没有引用width:100%。 感谢@LGSon注释掉!

EKons answered 2020-06-29T17:40:35Z
3 votes

要使链接填充所有可用空间,可以使用flexbox:

li {
    display: flex;
}
li > a { 
    flex: 1;
}
Jesper Lehtinen answered 2020-06-29T17:40:56Z
0 votes
item {display:flex;} item a {flex:none;}
Yoldosh answered 2020-06-29T17:41:11Z
translate from https://stackoverflow.com:/questions/4861230/make-a-link-have-100-width