html要素を横に並べる

Question

4つのHTML要素を合計幅100％で並べて配置したいと思います。

<input type="number" name="height" placeholder="weight"> 
<span>kg</span> 
<input type="number" name="weight" placeholder="height"> 
<span>cm</span> 

しかし、私は動作していないスタックオーバーフローで多くの回答が見つかりました。私はこのような何かを得る...

Answer 1

inputとspan要素は "インライン" 要素です。それらの幅はコンテンツの幅と同じです（または、inputの場合は、その幅になります）。あなたはすでに並べて配置されているが、widthを設定できるようにブロックされているかのように扱う必要があるため、合計で利用可能な幅の100％を占めることができますページ。

あなたは、レイアウトは、Webページでは、デフォルトでどのように動作するかを理解し始めるためにblock対inline要素とCSS Box Modelを検討する必要があります。ここで

は、空のスペースを埋めるためにストレッチするinputフィールドを引き起こし例です：

input { 
 
    display:inline-block;  /* Allow the inline element to be sized as a block element */ 
 
    width:calc(50% - 2.5em); /* Each will be 50% of the width of the parent - roughly 2.5 characters */ 
 
}

<input type="number" name="height" placeholder="weight"> 
 
<span>kg</span> 
 
<input type="number" name="weight" placeholder="height"> 
 
<span>cm</span>

それとも、あなただけの通常通りの幅をしたいが、それにすべての4つの要素が必要な場合は使用可能な幅の中央に配置するには、親要素に子要素を水平方向に揃える方法を伝える必要があります。text-align：

.center { 
 
    text-align:center; 
 
}

<div class="center"> 
 
    <input type="number" name="height" placeholder="weight"> 
 
    <span>kg</span> 
 
    <input type="number" name="weight" placeholder="height"> 
 
    <span>cm</span> 
 
</div>

Answer 2

フレキシボックスは、あなたが持っている親コンテナを、必要とするなど

、残りの幅、ラッピングまたは決してラップを占め、（両方の軸に）アライメントで簡単のように変形することができる幅display: flex。フレックスコンテナです。今すぐすべての子供たちはフレックスアイテムです。

CSSトリックには威力がありますCheatsheet for Flexbox。

• 入力（label要素である必要があり、それはないスパンで占められていないスペースを占有：ここ

  は2例がありますか？） - Codepenが

• 各要素の幅の約25％を占め、マイナス各入力とそのラベルとの間の必要なマージン - Codepen

html { 
 
    box-sizing: border-box; 
 
} 
 

 
* { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    padding: 2rem 1rem; 
 
    background-color: tomato; 
 
} 
 

 
.container input { 
 
    flex-grow: 1; 
 
} 
 

 
.container span { 
 
    margin: 0 4rem 0 0.5rem; 
 
} 
 

 
.container span:last-of-type { 
 
    margin-right: 0; 
 
}

<div class="container"> 
 
    <input type="number" name="height" placeholder="weight"> 
 
    <span>kg</span> 
 
    <input type="number" name="weight" placeholder="height"> 
 
    <span>cm</span> 
 
</div>

html { 
 
    box-sizing: border-box; 
 
} 
 

 
* { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    padding: 2rem 1rem; 
 
    background-color: beige; 
 
} 
 

 
.container input, 
 
.container span { 
 
    width: calc(25% - 0.5rem); /* half of the margin set below */ 
 
} 
 

 
.container span { 
 
    margin-left: 1rem; 
 
}

<div class="container"> 
 
    <input type="number" name="height" placeholder="weight"> 
 
    <span>kg</span> 
 
    <input type="number" name="weight" placeholder="height"> 
 
    <span>cm</span> 
 
</div>