CSS： display:inline-block 和 overflow:hidden 的组合导致奇怪的行为？ [复制]答案

【问题标题】：CSS: combination of display:inline-block and overflow:hidden causes weird behavior? [duplicate]CSS： display:inline-block 和 overflow:hidden 的组合导致奇怪的行为？ [复制]
【发布时间】：2015-03-20 06:18:06
【问题描述】：

所以，如果我有两个类似这样的同级 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”的作用不是很熟悉。

谢谢！

【问题讨论】：

是的，我的错，这在网站的其他地方已经很清楚地回答了

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

添加div > span { vertical-align: top; } 来解决这个问题。

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

【讨论】：

【解决方案3】：

这是我用来了解内联块如何工作的最佳指南，希望对您有所帮助，

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

【讨论】：

【解决方案4】：

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

你也可以position你的元素到div中。

【讨论】：