是否可以在可折叠按钮组中的按钮之间添加边距而无需在该组周围添加任何边距？

Question

我有一个带有n个按钮的按钮容器。

示例代码：

<div class="button-group">
  <div class= button>
    First
  </div>
  <div class= button>
    Second
  </div>
</div>

.button-group {
  display: flex;
  flex-wrap: wrap;

}

.button {
  padding: 20px 100px;
  border: 1px solid black;
  background-color: red;
}

https://codepen.io/anon/pen/LgQWmE

如何在这些按钮之间添加10px边距？

以下限制适用：

• 按钮可能会以未知的视口宽度折叠
• 这组按钮周围应该没有空白
• 我无法使用网格，因为IE 11不支持网格。

Answer 1

您可以将margin-right: 10px添加到所有.button元素中，然后定位组中的最后一个孩子并删除10px的边距：

body {
margin: 0;
padding: 0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
}

.button {
  padding: 20px 100px;
  border: 1px solid black;
  background: red;
  margin-right: 10px;
}

.button:last-child {
  margin-right: 0;
}

<div class="button-group">
  <div class=button>
    First
  </div>
  <div class=button>
    Second
  </div>
</div>