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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:22:35  来源:igfitidea点击:

CSS position absolute and width of parent container in percent

htmlcssdrop-down-menucss-position

提问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%。

Correction here

更正在这里

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:relativelevel_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这就是为什么它要大一点。我会使用左边距而不是右边距。那应该固定间距。