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

Question

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

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

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

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

score 2 · Accepted Answer

<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;
}

1 回答 1