左、中央と右のdivを持つトップメニュー

Question

なぜこのコードでは、2つの<input>要素の幅を親の20％、すなわち#rightの20％に設定しないのですか？それ自体はメニューの右側部分にすぎません（ブラウザのフルサイズではない）？

* { margin:0; padding: 0; } 
 
#menu { background-color: yellow; } 
 
#left {background-color: green; float: left; width: 200px; } 
 
#mid { background-color: red; float: left; width: 40%; } 
 
#right {background-color: blue; width: calc(100%-40%-200px);} 
 
#a1, #a2 { width: 20%; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right"> 
 
     <input id="a1" /> 
 
     <input id="a2" /> 
 
    </div> 
 
</div> 
 
<div> 
 
content of the site 
 
</div>

注：100％の幅が必要です一方#rightは、フルブラウザの幅を使用しているようです - 40％ - 200pxのを。それから20％が12％-40pxになります。つまり、#a1, #a2 { width: calc(12%-40px); }と設定できます。しかし、これは汚れたハックになるでしょう。 ＃a1と＃a2の幅を親の幅で設定したいと思っています。

Answer 1

私は、実行中のコードでインスペクタで見て、この気づいた：あなたは、各calc関数値の間にスペースを使用する必要が

を。

calc(100% - 40% - 200px) 

更新あなたはラッピングを見ている理由が発生

は、あなたが左に#rightをフロートする必要があるということです。

#right { 
    ... 
    float: left; 
} 

この1つのルールを追加すると、期待していることがわかります。

あなたはテキスト入力（図示せず）との間に少し隙間が気付いた場合は、入力が配置されているあなたのHTML内の空白を削除します。

この行います。この中

<input id="a1" /> 
<input id="a2" /> 

：

<input id="a1" /><input id="a2" /> 

---

* { margin:0; padding: 0; } 
 
#menu { background-color: yellow; } 
 
#left {background-color: green; float: left; width: 200px; } 
 
#mid { background-color: red; float: left; width: 40%; } 
 
#right { background-color: blue; width: calc(100% - 40% - 200px); float: left; } 
 
#a1, #a2 { width: 20%; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right"> 
 
     <input id="a1" /><input id="a2" /> 
 
    </div> 
 
</div> 
 
<div> 
 
content of the site 
 
</div>