使链接具有100%的宽度

Question

我有一个X像素宽的盒子.在其中我有一个list(<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;
}