css - 即使嵌套溢出，嵌套容器也不会出现内联：隐藏

Question

我有 2 <span>s 嵌套在 div 之类的；

<div class="container">
  <span class="content" style="background-color: #CC0033;">foo</span>
  <span class="content" style="background-color: #FF6600;">bar</span>
</div>

这是CSS；

.container{
  width: 150px;
  height: 100px;
  background-color: #0066CC;
  overflow: hidden;
}
.content{
  width: 96px;
  height: 96px;
  border: solid 2px #333333;
  float: left;
}

但是第二个孩子在第一个孩子之后进入底部，并且内联不可见。容器的宽度是固定的。但我想完全显示第一个跨度并部分显示第二个跨度。

这是小提琴。

Answer 1

为此，您必须将跨度包装在与跨度宽度之和一样宽或更宽的块元素中。

jsFiddle 示例

<div class="container">
    <div id="wrapper">
        <span class="content" style="background-color: #CC0033;">foo</span>
        <span class="content" style="background-color: #FF6600;">bar</span>
    </div>
</div>

CSS

#wrapper {
    width:200px;
}

如果水平空间不足，内联和内联块元素将换行到下一行。通过将它们包装在块级元素中，您可以将其推入容器的喉咙并迫使它们彼此相邻出现。

Answer 2

将您的容器更改为display: inline-block并删除宽度样式。

.container{
  display: inline-block;
  height: 100px;
  background-color: #0066CC;
  overflow: hidden;
}

小提琴

这导致容器只占用它需要的空间，但所有内容都保持内联。

还可以选择在容器上添加一个max-width: 100%，这样它们就会被包裹而不是离开屏幕（例如在手机上）。