当容器宽度小于子元素宽度之和时如何禁止div元素之间的换行答案

【问题标题】：How to prohibit line breaks between div elements when the container width is shorter than the sum of the widths of the children当容器宽度小于子元素宽度之和时如何禁止div元素之间的换行
【发布时间】：2012-12-20 16:00:55
【问题描述】：

我有一个容器 div 元素和一些子 div 元素。

<div>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
<div>

我想在一行中水平列出子元素而没有换行符。我读到我可以在容器元素上使用white-space:nowrap 和/或在子元素上使用display:inline 或display:inline-block。这在容器的宽度足够长时有效。

但是，我有一个容器，其宽度可能会小于子项宽度的总和。在这种情况下，上述方式并不禁止换行。我仍然想禁止换行并强制它们在一行上，如果容器宽度不够，孩子的额外部分是hidden。我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

#parent{
   overflow: hidden;
   white-space: nowrap;
}

.child{
   display: inline-block;
   width: 200px;
   height: 200px;
}

http://jsfiddle.net/YAp6k/

【讨论】：

这基本上是对的，但是孩子要么需要溢出：隐藏，要么需要删除宽度和高度，因为现在文本超过长度时只会在其他 div 之上运行。
@fdsa 这一切都取决于子 div 中的内容。该信息未包含在问题中。如果是需要换行的文本，那么一个简单的white-space: normal 就足够了。
这很好。我以为他想要一种方式，但他真的没有具体说明
我有固定宽度的 div 元素作为子元素，并且不希望它们的形状以任何方式改变。我是否也必须为孩子们设置overflow:hidden？