ページスタイリング：浮動小数点を使用する代わりに

Question

私はお互いの隣に要素を配置したいときは、いつでも浮動小数点を使用する傾向があります。 floatで2つのdivを使用するように：それらの上に残してください。 それが最善の戦略であるか、そこにはより良い選択肢があるのだろうかと思います。

これは私が上記のコードに向上させることができます他に何のコード例

<div> 
    <div style="float:left"> 
    <p>Alphabet</p> 
    <select style="width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
    </div> 
     <div style="float:left; margin-left:20px;"> 
     <p>Number</p><input type="text" value="123" /> 
     </div> 
</div> 

です。それは本当に必要なのですか、私は他のタグを使うべきですか？<p>ですか？

A Live Example

Answer 1

例style="display:inline-block"

そして、あなたの2番目の質問についてのための使用：labelを使用して

<div style="display:inline-block"> 
    <label for="alphabet" style="display:block;">Alphabet</label> 
    <select id="alphabet" style=" width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
</div> 

がよりセマンティックであり、それにdisplay:blockを適用し、それが全体の幅にまたがることができます。

また、インラインCSSを使用しないようにしてください。

Answer 2

display:inline-block;の代わりに、thisのようなラベルを使用することもできます。

ラベルは、表示機能が制限されているデバイス、特に手持ち型のデバイスでは、クリックすると指定したフィールドが有効になるため、優れています。あなたはいつもそれらを使うべきです。

とにかく、私はフロートを使用していない点は表示されません。それらを正しく使用する方法が分かっている場合、それらはすばらしいものであり、すべてのブラウザで互換性があります。

Answer 3

float: left;を使用してください。この状況でそれを使用しない理由はありません。

これは非常にうまくサポートされています。古いブラウザーでハックしない限り、「インラインブロック」は問題ありません。float: left;を使用していた可能性があります。