一行中的 Div 溢出 parent

Question

有一个 parent div 与 width:70px 和 overflow-x:hidden 我想添加 2 children div 与 width:50px 在一行中，这样第二个 div 将有 20px 的可见部分，30px 被 parent 节点隐藏。这是我尝试做的：

HTML:

<div id="parent">
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS:

#parent{
    width:70px;
    height:50px;
    overflow-x:hidden;
}
#first{
    width:50px;
    height:50px;
    background-color:#aeaeae;
    display:inline-block;
}
#second{
    width:50px;
    height:50px;
    background-color:#CC0A0A;
    display:inline-block;
}

Answer 1

您可以将 white-space: nowrap 添加到 #parent，这样内联级子项就不会换行。

另请注意，内联流中的内联级元素之间有一个空格，您可以通过以下方式删除它：

删除标记 ...</div><div>... 中的 spaces/tabs/newlines。
在标记  中注释 spaces/tabs/newlines。
将父项的 font-size 设置为 0 并在子项上将其重新设置回 16px
和...

#parent{
  width:70px;
  height:50px;
  overflow-x:hidden;
  white-space: nowrap;
}

#first{
  width:50px;
  height:50px;
  background-color:#aeaeae;
  display:inline-block;
}

#second{
  width:50px;
  height:50px;
  background-color:#CC0A0A;
  display:inline-block;
}

<div id="parent">
    <div id="first">First element</div><div id="second">Second element</div>
</div>

一行中的 Div 溢出 parent

Divs in one line with overflowed parent

html

css

overflow