为什么不列出项目大小以适合其内容？

Question

相关小提琴：http://jsfiddle.net/jr32b6zm/2/

我想使用列表来设置看起来像按钮的一组链接的样式。但是，当我在链接中添加填充时，它们不会使包含的li的尺寸变大。我可以通过在li上添加相同的填充来解决此问题，但这让我想知道li为何不能扩展以填充其内容？

Answer 1

错误地将填充添加到a标签中。相反，您需要将填充添加到li

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

li {
  border: 2px solid #000;
  padding: 0.5em;
}

<ul>
  <li><a>one</a></li>
  <li><a>one</a></li>
  <li><a>one</a></li>
</ul>

您还是要为CSS使用a标签吗？将display:inline-block添加到a。进一步了解inline-block。

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

a {
  border: 2px solid #000;
  padding: 0.5em;
  display:inline-block;
}

<ul>
  <li><a>one</a></li>
  <li><a>one</a></li>
  <li><a>one</a></li>
</ul>

Answer 2

a是一个内联元素，因此不受填充的影响。您需要使a成为块级元素才能起作用：

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

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