使链接具有100％的宽度

Question

我有一个X px宽的盒子。在其中我有一个列表（<ul>）与链接元素（<li><a ..></a><li>）

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

Answer 1

将display: block添加到您的a代码。

Answer 2

我同意Scott的观点，但我会建议使用此代码：

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

或此代码：

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

我建议使用display: inline-block，因为display: block会使<a>元素出现在其行中。 （在这种情况下两者都没问题，但并非在所有情况下）

修改：似乎未引用width:100%。感谢@LGSon发表评论！

Answer 3

要使链接填写所有可用空间，您可以使用flexbox：

li {
    display: flex;
}
li > a { 
    flex: 1;
}

Answer 4

item {display:flex;} item a {flex:none;}