Question

我很难调试此问题。我需要我的按钮既可以触摸又可以水平堆叠。在桌面浏览器上，我得到类似于以下内容的内容：

＆＃13;

#aWrapper {
  display: flex;
}

.buttons {
  border: 1px solid black;
  display: block;
 }

＆＃13;

<div id="aWrapper">
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
</div>

＆＃13;

这就是我想要的！但是在iOS上的移动浏览器（Chrome，Safari，Opera Mini和Firefox）上，我使用完全相同的代码得到了这个结果（为了说明，我添加了一个保证金）：

＆＃13;

#aWrapper {
  display: flex;
}

.buttons {
  border: 1px solid black;
  display: block;
  
  margin-right: 4px; /*IGNORE THIS*/
 }

＆＃13;

<div id="aWrapper">
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
</div>

＆＃13;

为什么会这样？我从其他答案中看到白白空间可能是一个问题，但在这种情况下并非如此。

以下CodePen显示了这一点。在桌面浏览器中打开它，然后使用任何浏览器在iOS设备上打开它。移动浏览器中的按钮之间应该有额外的间距，它们应该在桌面浏览器中触摸。

注意：我标记为正确的答案正常，但display: flex也适用于包装器，我只是没有正确导入我的css normalizer文件，导致这种不必要的麻烦。

Answer 1

HMM

因为我没有任何ios设备可以测试，但这是我期望的工作

#aWrapper .buttons{
  display: inline-block;
  border: 1px solid black;
  margin: 0;
  float: left;
}
#aWrapper{
  clear: both;
}