divのコンテンツをラップしない方法は？

div2つのボタンを含む固定幅があります。ボタンのラベルが長すぎる場合、ボタンは折り返されます。1つのボタンは最初の行にとどまり、次のボタンは隣接するのではなく、その下に続きます。

div両方のボタンが1行に表示されるようにを強制的に拡張するにはどうすればよいですか？

お試しくださいwhite-space: nowrap;。。。

両方の組み合わせでfloat: left; white-space: nowrap;うまくいきました。

それらのそれぞれは独立して望ましい結果を達成しませんでした。

これの背後にある理由はわかりませんが、親コンテナーをに設定display:flexし、子コンテナーをに設定しましたdisplay:inline-block。子を合わせた幅が親を超えているにもかかわらず、それらはインラインのままでした。

とおもちゃする必要はありませんでしたmax-width、max-height、white-space、または何か他のもの。

それが誰かを助けることを願っています。

divの最小幅を気にせず、コンテナー全体でdivを展開したくない場合は、左にフロートできます。フロートdivはデフォルトで展開され、次のようにコンテンツをサポートします。

<form>
    <div style="float: left; background-color: blue">
        <input type="button" name="blah" value="lots and lots of characters"/>
        <input type="button" name="blah2" value="some characters"/>
    </div>
</form>

divの幅が固定されている場合、幅を固定しているため、展開されません。ただし、最新のブラウザはmin-width CSSプロパティをます。

CSS式を使用するか、自動幅を使用してコンテナーにスペーサーオブジェクトを配置することにより、古いIEブラウザーでmin-widthプロパティをエミュレートできます。このソリューションは洗練されていませんが、トリックを実行する可能性があります。

<div id="container" style="float: left">
  <div id="spacer" style="height: 1px; width: 300px"></div>
  <button>Button 1 text</button>
  <button>Button 2 text</button>
</div>

ボタンを強制的に同じ行に留めると、ボタンが配置されているdivの固定幅を超えてしまいます。それでよければ、すでにあるdiv内に別のdivを作成できます。次に、新しいdivはボタンを保持し、2つのボタンが1行に収まるために必要なスペースの固定幅を持ちます。

次に例を示します。

<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
    <div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
       <button id="button1">1</button>
       <button id="button2">2</button>
    </div>
</div>

オーバーフローを検討することをお勧めしますの内容外のチャンクのプロパティをparentDivボーダーのます。

幸運を！