在换行符中处理边距时，有没有比calc更简单的替代方法？

Question

当使用元素之间有边距的元素创建自适应布局时，当视口导致换行时，它们的对齐方式会混乱。我使用calc()发布了一种可能的解决方法，但我想知道是否有更简单的解决方案。有关更多上下文，请参见下面的示例代码片段。

我已经知道父母负边际解决方案。在我的大多数情况下，这不起作用。寻找其他选择。

h4{
  margin: 0;
  padding:10px 10px 0;
}
div{
  background:lightgray;
  width:600px;
  margin: 10px;
}

div:nth-of-type(2),
div:nth-of-type(3){
  width: 250px;
}

button{
  margin: 10px;
  width: 100%;
  max-width: 280px;
  padding:10px;
}

div:nth-of-type(3)>button{
  width: calc(100% - 20px);
}

<div>
  <h4>DESKTOP</h4>
  <button>BUTTON 1</button><button>BUTTON 2</button>
</div>

<div>
  <h4>MOBILE</h4>
  <button>BUTTON 1</button><button>BUTTON 2</button>
</div>

<div>
  <h4>"CALC" WORKAROUND</h4>
  <button>BUTTON 1</button><button>BUTTON 2</button>
</div>

Answer 1

这是否更简单是有争议的，但是可以不用calc来完成。问题在于，自动宽度的按钮被卡住以具有适合缩小的特征。那不是你想要的。因此，我们需要将按钮放在容器中，使其具有更多类似于块容器的自动宽度行为，然后按钮宽度可以是它们的100％。像这样：

h4{
  margin: 0;
  padding:10px 10px 0;
}
div{
  background:lightgray;
  width:600px;
  margin: 10px;
}

div:nth-of-type(2),
div:nth-of-type(3),
div:nth-of-type(4){
  width: 250px;
}

button{
  margin: 10px;
  width: 100%;
  max-width: 280px;
  padding:10px;
}

div:nth-of-type(3)>button{
  width: calc(100% - 20px);
}

div:nth-of-type(4)>span{
  display:block;
  margin:0 10px;
}
div:nth-of-type(4)>span>button{
  width: 100%;
  margin:10px 0;
}

<div>
  <h4>DESKTOP</h4>
  <button>BUTTON 1</button><button>BUTTON 2</button>
</div>

<div>
  <h4>MOBILE</h4>
  <button>BUTTON 1</button><button>BUTTON 2</button>
</div>

<div>
  <h4>"CALC" WORKAROUND</h4>
  <button>BUTTON 1</button><button>BUTTON 2</button>
</div>

<div>
  <h4>"Block Container" WORKAROUND</h4>
  <span><button>BUTTON 1</button></span><span><button>BUTTON 2</button></span>
</div>