使链接具有100％的宽度

Question

我有一个宽度为X像素的盒子。里面有一个带链接元素的列表（<ul>），链接元素是<li><a ..></a><li>格式的。

如何使用CSS在文本之外使链接可点击，且在盒子中展开100%的宽度。这样可以让盒子中的每一行都可点击 :D

- Jason94

---

用<a>...</a>把盒子包装起来了吗？ - Sotiris

Answer 1

在你的 a 元素中添加 display: block。

- user527892

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 的评论！

- EKons

Answer 3

要使链接填满所有可用空间，可以使用Flexbox：

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

- Jesper N

Answer 4

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

- Yoldosh