gpt4 book ai didi

css - 带左、中、右 div 的顶部菜单

转载 作者:行者123 更新时间:2023-11-28 08:40:25 24 4
gpt4 key购买 nike

为什么这段代码不设置两个 <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 的宽度。

最佳答案

我在检查器中查看了您正在运行的代码,并注意到了这一点:

enter image description here

您需要在每个 calc 函数值之间使用空格。

calc(100% - 40% - 200px)

更新

您看到环绕发生的原因是您需要将 #right float 到左侧。

#right {
...
float: left;
}

添加一条规则即可满足您的期望。

enter image description here

如果您注意到文本输入之间有一点间隙(图中未显示),请删除 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>

关于css - 带左、中、右 div 的顶部菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37221041/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com