html - 列表项宽度为 50%，但边距超出了它们的宽度

Question

可能是个简单的问题，但我这里有这个布局

所以基本上它是什么，是一个 ul，display 设置为 flex，flex-wrap 设置为 wrap，里面是 li，width 设置为 50%所以我们在包装之前将两个 li 放在一起..现在我想要每个列表项之间的空间在两边大约 10px .. 所以这是怎么回事

很明显，每个列表项都在换行，因为边距添加在 50% 宽度的顶部...有没有办法我仍然可以在每个元素周围留出边距，但它只是从 li 元素的宽度中拿走？所以我得到了这个布局..

我的代码如下

html

<ul class="role-select__selection">
  <li>BUSINESS OWNER</li>
  <li>FINANCE TEAM</li>
  <li>BOOK KEEPER</li>
  <li>ACCOUNTANT</li>
  <li>OTHER</li>
</ul>

CSS

.role-select__selection{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.role-select__selection li{
    width: 50%;
    border: 1px solid;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 0 3px;
    font-size: 0.70em;
    margin: 10px 10px 0 0;
    padding: 8px 8px;
}

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

你需要为此使用 CSS calc。

.role-select__selection{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.role-select__selection li{
    width: calc(50% - 10px);
    border: 1px solid;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 0 3px;
    font-size: 0.70em;
    margin: 10px 10px 0 0;
    padding: 8px 8px;
}

<ul class="role-select__selection">
  <li>BUSINESS OWNER</li>
  <li>FINANCE TEAM</li>
  <li>BOOK KEEPER</li>
  <li>ACCOUNTANT</li>
  <li>OTHER</li>
</ul>