html - float か: left が多くなるs/は一列に並んでいますか？

Question

5 つのメニュー ボタンを 1 列に並べて表示します。

float:leftボタンのクラスのスタイルを入れました。

それは私のために仕事をしました。

これを見てください。に変更display:inlineするとfloat:left、2 つの段落が整列しません。 これに対する正しいアプローチはどれですか？

編集: JS Fiddle では正常に動作しますが、w3schools では動作しないことがわかりました。そのため、混乱が生じます。

Answer 1

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

div { white-space: nowrap }
p { display: inline }

これにより、段落が常に並んで表示されます。例

段落を表示するように設定する必要がある場合: inline-block、これらの要素をデフォルトで inline-element である要素に変更して、古い IE で機能させるようにしてください。

Answer 2

どちらでもいいと思います。ボタンのレイアウトには、個人的にフローティング要素を選択します。

トピックの質問への回答は「はい」です。divタグとpタグの幅の合計が周囲の要素の幅より大きくない場合、それらは同じ行に留まります。

例えば：

//HTML
<div class="wrapper">
    <div class="button">buttoncontent</div>
    <div class="button">buttoncontent</div>
</div>  

//CSS
.wrapper {
    width: 100px;
}

.button {
    float: left;
    width: 60px;
}

この例では、ボタンの合計幅が120ピクセルで、周囲の要素の幅が100ピクセルしかないため、2番目のボタンは独自の行に印刷されます。クラスボタンの幅が40pxの場合、2つのボタン要素は同じ行に印刷されます。