Question

有一个宽度为div的父div：70px和overflow-x：hidden我想在一行中添加2个宽度为div的子div：50px，这样第二个div将有20px的可见部分，而30px被父节点隐藏。这就是我试图做的事情：

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>...中的空格/制表符/换行符。
评论标记中的空格/制表符/换行符。
将父级的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>

与父母溢出的一行划分

1 个答案: