时间戳

首页 > 解决方案 > 列出项目宽度 50%，但边距超出其宽度

html - 列出项目宽度 50%，但边距超出其宽度

问题描述

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

在此处输入图像描述

所以基本上它是一个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;
}

任何帮助，将不胜感激！

谢谢

标签： htmlcss

解决方案

你需要为此使用 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>

推荐阅读