Html 为什么不'；是否列出项目大小以适合其内容？

相关小提琴：

---

我想用一个列表来设计一组看起来像按钮的链接。但是当我在链接中添加填充时，它们不会使包含的

li

大小变大。我可以通过在

li

中添加相同的填充来解决这个问题，但这让我想知道为什么

li

没有扩展以填充其内容？

错误地将填充添加到

标记中。相反，您需要将填充添加到
li


ul{
列表样式类型：无；
显示：内联块；
}
李{
边框：2倍实心#000；
填充：0.5em；
}

一个
一个
一个
A
A
是一个内联元素，因此不受填充的影响。您需要使
成为一个
块级元素，使其工作：

ul {
  list-style: none;
  display: inline-block;
}

a {
  border: 2px solid #000;
  padding: 0.5em;
  display: block; // Add this line
}

可能重复的小点：据我所知，在
a
中添加填充的原因是浏览器考虑点击测试的区域。仅在
li
中添加填充意味着您必须专门单击文本才能单击“按钮”，这不是我想要的。但是
内联块
似乎是答案！