頂部菜單左，中，右分區

Question

爲什麼不把這兩個<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>

注：似乎#right採用全瀏覽器的寬度，而它應該有100％的寬度 - 40％ - 200像素。然後，這20％將是12％-40px，即我可以設置#a1, #a2 { width: calc(12%-40px); }。但這將是一個骯髒的黑客。我真的想根據它的父寬度來設置＃a1和＃a2的寬度。

Answer 1

我看着在檢查你正在運行的代碼，並注意到了這一點：

，需要在每個calc函數值之間使用空格。

calc(100% - 40% - 200px) 

更新

你看到包裝的原因發生的是，你需要浮動#right左側。

#right { 
    ... 
    float: left; 
} 

添加一條規則給我們你所期待的。

如果您發現您的文本輸入（無圖）之間的差距不大，去掉你的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>