html - CSS - 元素在调整大小后相互堆叠

Question

我有具有这些属性的按钮:

background: #c6cdf2;
border: 1px solid #8896e4;
border-radius: 3px;
padding: 6px 10px 3px 10px;

一旦页面调整大小，它们似乎并不关心填充并开始相互堆叠。

有没有办法自动计算边界之间的适当边距？我不想设置固定数量的 margin 来遇到这种情况。

Answer 1

你可以使用 flexbox。不需要媒体查询或额外的代码。简化它。

div {
  display: flex;
  flex-wrap: wrap;
}

a {
  background: #c6cdf2;
  border: 1px solid #8896e4;
  border-radius: 3px;
  padding: 6px 10px 3px;
  margin: 10px /* whatever you want here */
}

<div>
  <a href="#">long long long text</a>
  <a href="#">long long text demo</a>
  <a href="#">short text</a>
</div>