CSS：显示组合：内联块和溢出：隐藏导致奇怪的行为？

Question

所以，如果我有两个像这样的兄弟HTML元素：

<div>
  <span id="child-one">ChildOne</span>
  <span id="child-two">ChildTwo</span>
</div>

这两个兄弟元素中的一个，但不是两个，在它们的样式中都有“display：inline-block”和“overflow：hidden”：

#child-one {
  display: inline-block;
}

#child-two {
  display: inline-block;
  overflow: hidden;
}

然后显示一个兄弟姐妹在另一个下方偏移了一小段距离。 （看到它发生在这里：https://jsfiddle.net/reyan62/oqc71f25/）（P.S。我正在使用Chrome）

有没有人对此有解释？这看起来很奇怪。我不是很熟悉“display：inline-block”的功能。

谢谢！

Answer 1

我没有足够的代表发表评论，但请参考其他的帖子

Why is this inline-block element pushed downward?

Answer 2

我建议在两个元素上使用overflow: hidden;。如果不可能，您可以使用vertical-align来解决问题。这个question/answer解释了原因。

Answer 3

添加div > span { vertical-align: top; }以解决此问题。

像这样：https://jsfiddle.net/oqc71f25/2/

Answer 4

这是我用来理解内联块如何工作的最佳指南，我希望它可以帮到你，

http://learnlayout.com/inline-block.html

Answer 5

我会尝试在两者上使用overflow:hidden，或者您可以手动对齐它们。

您还可以将position元素放入div中。