html - コンテナの幅が子の幅の合計よりも短い場合にdiv要素間の改行を禁止する方法

Question

コンテナのdiv要素といくつかの子のdiv要素があります。

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

子要素を改行なしで1行に水平にリストしたいと思います。white-space:nowrapコンテナ要素および/またはdisplay:inline子で使用できることを読みdisplay:inline-blockました。これは、コンテナの幅が十分に長い場合に機能します。

ただし、子の幅の合計よりも幅が短くなる可能性のあるコンテナがあります。上記の方法は、そのような場合の改行を禁止するものではありません。私はまだ改行を禁止し、それらを1行にするように強制したいと思います。子の余分な部分は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