android - 如何使 Chrome for Android 中的 inline-block 正常工作？

Question

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

根据这个屏幕截图，我已经让它在桌面版 Chrome 中运行良好: .

两条“答案选择”行，包括红色的“X”按钮，位于一个 div 中(称为 answers)。绿色“+”按钮位于 answers div 布局中。我已将 display: inline-block 应用于 answers div，如您所见，它按预期工作。

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

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

如何强制 Android 上的 Chrome 遵循 inline-block 样式？

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

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

Answer 1

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

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

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