CSS - 为列表项添加填充无法正常工作[重复]答案

【问题标题】：CSS - adding padding to list items not working properly [duplicate]CSS - 为列表项添加填充无法正常工作[重复]
【发布时间】：2020-05-11 05:14:28
【问题描述】：

我有一个像这样的无序列表：

<ul>
    <li class="active">40' Singles</li>
        <li>46' Singles</li>
        <li>50' Singles</li>
        <li>Custom Lots</li>
</ul>

每个列表项的宽度为 50%，向左浮动并具有背景色：

ul li {
 float: left; width: 50%; background-color: rgba(255, 255, 255, 0.7); 
}

看起来没问题，到目前为止，我每行有两个列表项，这是我想要的，现在我正在尝试为每个列表项添加填充，这样背景颜色就不会触及..我尝试添加填充的 20px 并且不起作用，添加了填充，但是现在我的列表项在自己的行上，我也尝试了 20px 的边距，同样的结果，我在这里做错了什么？

【问题讨论】：

投票重新打开，因为重复的答案只是解决问题的一部分。

标签： html css

【解决方案1】：

您需要将box-sizing: border-box 添加到您的li 样式中。原因是宽度默认不包含padding。

ul.calc li {
  float: left;
  width: calc( 50% - 20px);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;
}

ul.background-clip li {
  float: left;
  width: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  box-sizing: border-box;
  background-clip: content-box;
}

<ul class="calc">
  <li class="active">40' Singles</li>
  <li>46' Singles</li>
  <li>50' Singles</li>
  <li>Custom Lots</li>
</ul>

<ul class="background-clip">
  <li class="active">40' Singles</li>
  <li>46' Singles</li>
  <li>50' Singles</li>
  <li>Custom Lots</li>
</ul>

【讨论】：

我这样做了，但背景颜色仍然很感人
但是它们不再在自己的线上，这很好，但是背景颜色仍然很感人...我如何获得间距？
更新了答案。在宽度上使用calc() 并添加边距。
@user979331 或添加background-clip:content-box，无需添加边距或更改宽度
@TemaniAfif 这也可以，但是填充 bg-color 会消失。我添加了它作为另一个例子。