ラベルと要素を隣接させながらフォーム要素を行に配置するにはどうすればよいですか？

Question

私はラベルの

• 設定幅に100pxに
• 位置はラベルの右に/入力要素を選択することがCSSを作成する行の
• 位置{ラベル、素子}セクション

これまでの私のCSSは失敗しています...私はそれをやる方法を知らない。

Label: [ ... ] 
Label2: [ ... ] 
Label3: [... ] 

方法：一言で言えば、私はこれをしたいですか？あなたが持っているHTML構造で

span { 
 
    width: 100px; 
 
    display: block; 
 
}

<div><label> 
 
    <span>Label:</span> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
</label> 
 
    <label> 
 
    <span>Label2:</span> 
 
    <input name="motor" value="44" type="number"> 
 
</label></div>

Answer 1

、あなたはspanが新しい行にそれを設定するblockにinline-blockとlabelとして表示するように設定するとよいでしょう。

設定をspanからinline-blockに設定すると、インラインにすることはできますが、それでもボックススタイル（幅など）は維持されます。

span { 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 

 
label {display:block}

<div> 
 
    <label> 
 
    <span>Label:</span> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    </label> 
 
    <label> 
 
    <span>Label2:</span> 
 
    <input name="motor" value="44" type="number"> 
 
    </label> 
 
</div>

Answer 2

あなたの問題を解決別々div要素で各labelを置きます。与えられたリンクを試してみてくださいまたはコード

JSFiddle

HTMLコード -

<div> 
    <label> 
     <span>Label:</span> 
     <select> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </label> 
</div> 
<div> 
    <label> 
     <span>Label2:</span> 
     <input name="motor" value="44" type="number"> 
    </label> 
</div> 

CSSコード -

span { 
    width: 100px; 
} 

以下