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:absolute
for 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_2
it automatically turns with the width of its parent
使用“ width:100%
”,.level_2
它会自动随着其父级的宽度而变化
回答by Lowkase
Add position:relative
to 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 6px
on your first row li
thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
嘿,伙计6px
,你的第一行有一个边距,li
这就是为什么它要大一点。我会使用左边距而不是右边距。那应该固定间距。