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

当使用元素之间有边距的元素创建响应式布局时，当视口导致换行时，它们的对齐方式会混乱。我使用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>

最佳答案

这是否更简单是有争议的，但是可以不用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>

关于html - 在换行符中处理边距时，有没有比`calc`更简单的替代方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51432112/