如何在Chrome for Android中使用inline-block正常工作？

Question

我正在尝试设置一个在Chrome for Android和桌面Chrome中看起来不错的网页。

根据此屏幕截图，我在桌面Chrome中运行良好：

两个“Answer Choice”行，包括红色的“X”按钮，都在div中（称为answers）。绿色“+”按钮位于 answers div之后的布局中。我已将display: inline-block应用于answers div，如您所见，它正在按预期工作。

但是，当我尝试在Android版Chrome中执行此操作时，inline-block样式似乎无法正常运行：

我可以确认应用 样式（我可以使用远程检查器）。如果我删除了样式，绿色的“+”按钮向上移动几个像素，表明它正在做某事，而不是我想要的。

如何强制Android上的Chrome尊重inline-block样式？

编辑：这是适用于包含所有答案选项的div的CSS：

.answers {
    display: inline-block;
    margin-bottom: 5px
}

Answer 1

我遇到了同样的问题，并在另一个关于div和内联块样式的问题上找到了解决方案。这是因为html中白色空间崩溃的方式。您需要更改html，以便第一个按钮的关闭标记在第二个按钮的开放标记之间没有空格。

<button class="button1">1
</button><button class="button2">2
</button>

请参阅inline-block elements are line breaking for seemingly no reason?

Answer 2

我也经历过Android上的内联块行为不一致。虽然我无法准确追踪到底发生了什么，但在很多情况下，您可以使用display: inline，这样可以保持一致。

当然，您不能在内联元素上使用保证金。要解决垂直定位问题，您可以使用vertical-align: middle。

Answer 3

尝试将“！important”添加到“display：inline-block;” - 属性中。那么它应该是这样的：

display: inline-block !important;