Html 父容器的 CSS 绝对位置和宽度百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16546324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position absolute and width of parent container in percent
提问by chris
I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolutefor the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
我正在尝试构建一个宽度灵活的 HTML/CSS 下拉菜单。由于position:absolute导航的第二级，我没有得到第一级的宽度。删除 position:absolute 将在悬停时移动所有以下元素...
How can I solve this?
我该如何解决这个问题？
Here is the code:
这是代码：
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}<ul class="level_1">
<li>
<a href="#">Level one (1)</a>
<ul class="level_2">
<li><a href="#">Level two (1)</a></li>
</ul>
</li>
<li><a href="#">Level one (2)</a></li>
</ul>
<p>Paragraph</p>See the result here: http://jsfiddle.net/5uf2Y/Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
在此处查看结果：http: //jsfiddle.net/5uf2Y/ 将鼠标悬停在“一级 (1)”上，您会看到，第二级与第一级的大小不同......
回答by artSx
You have forget two elements for display 100%.
你忘记了两个元素来显示 100%。
1st elements forgets it's :Position relative on level_1 > li
第一个元素忘记了它：在 level_1 > li 上的相对位置
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :change size of 2nd li
第二个元素更正它是：更改第二个 li 的大小
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2it automatically turns with the width of its parent
使用“ width:100%”，.level_2它会自动随着其父级的宽度而变化
回答by Lowkase
Add position:relativeto level_1 > li
添加position:relative到level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
回答by Alexander Bell
Try to set the body { width:100%;}property, it will fix this issue, like shown below (added to your original CSS):
尝试设置该body { width:100%;}属性，它将解决此问题，如下所示（添加到您的原始 CSS）：
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
回答by Cam
Hey man you have a margin of 6pxon your first row lithats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
嘿，伙计6px，你的第一行有一个边距，li这就是为什么它要大一点。我会使用左边距而不是右边距。那应该固定间距。
