css – 带有左,中,右div的顶级菜单

为什么这段代码没有设置两个< 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％ – 200px.然后20％将是12％-40px,即我可以设置#a1,#a2 {width：calc(12％-40px); }.但这将是一个肮脏的黑客.我真的想根据其父宽度设置#a1和#a2的宽度.

解决方法

我在你的运行代码中查看了检查员,并注意到了这一点：

您需要在每个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>