如何使尺寸与父母李相同？

Question

我正在使用一个下拉菜单，但我尝试将其内部ul的大小设置为与父li相同的大小。

有人可以告诉我我在做什么错吗？

这是我的代码的演示。

 * { margin: 0px; padding: 0px; } ul.topMenu { background: #111; overflow: hidden; } ul.topMenu li { float: left; list-style: none; } ul.topMenu li a { padding: 12px 15px; display: block; color: white; text-decoration: none; transition: .4s; border-right: 1px solid #fff; } ul.topMenu li:first-child a { border-left: 1px solid #222222; } ul.topMenu li a:hover, ul.topMenu li a:focus { background: black; } ul.topMenu ul { position: absolute; background: #222; } ul.topMenu ul li { float: none; } 

 <ul id="topMenu" class="topMenu"> <li><a href="#">Sed ut perspiciatis </a> </li> <li><a href="#">Nemo enim </a> <ul> <li><a href="#">Sit amet </a> </li> <li><a href="#">Excepteur </a> </li> <li><a href="#">Neque </a> </li> </ul> </li> <li><a href="#">Neque porro </a> </li> <li><a href="#">Ut enim ad </a> </li> <li><a href="#">Quis autem vel eum </a> <ul> <li><a href="#">Sit amet </a> </li> <li><a href="#">Excepteur </a> </li> <li><a href="#">Neque </a> </li> </ul> </li> </ul> 

Answer 1

ul元素始终（默认情况下）具有一些填充。 因此，您应该添加：

ul {
  padding: 0px;
}

另外，如果希望li元素的宽度相等，则应设置一些固定宽度，例如：

ul li {
 width: 300px;
}

Answer 2

笔记：

• 为了使ul元素与其li父元素一样宽，必须将其位置更改为position: relative ，以便可以使用width: 100% 。

• 然后，您必须消除overflow: hidden从ul.topMenu overflow: hidden并设置固定高度。 设置height: 42px就可以了。

码：

ul.topMenu ul {
    position: relative;
    width: 100%;
}

ul.topMenu {
    height: 42px;
}

jsFiddle： → 这里 。

片段：

 * { margin: 0px; padding: 0px; } ul.topMenu { background: #111; height: 42px; } ul.topMenu li { float: left; list-style: none; } ul.topMenu li a { padding: 12px 15px; display: block; color: white; text-decoration: none; transition: .4s; border-right: 1px solid #fff; } ul.topMenu li:first-child a { border-left: 1px solid #222222; } ul.topMenu li a:hover, ul.topMenu li a:focus { background: black; } ul.topMenu ul { position: relative; background: #222; width: 100%; } ul.topMenu ul li { float: none; } 

 <ul id="topMenu" class="topMenu"> <li><a href="#">Sed ut perspiciatis </a></li> <li><a href="#">Nemo enim </a> <ul> <li><a href="#">Sit amet </a></li> <li><a href="#">Excepteur </a></li> <li><a href="#">Neque </a></li> </ul> </li> <li><a href="#">Neque porro </a></li> <li><a href="#">Ut enim ad </a></li> <li><a href="#">Quis autem vel eum </a> <ul> <li><a href="#">Sit amet </a></li> <li><a href="#">Excepteur </a></li> <li><a href="#">Neque </a></li> </ul> </li> </ul> 

Answer 3

您正在遇到由webkit添加的40px意外填充。 您需要通过添加自己的样式来取消此样式。 例如，减轻此问题的一种方法是添加样式=“ padding：0;” 给有问题的ul。 屏幕截图

Answer 4

最好阅读更多有关position的信息，如果我们谈论您的代码，则需要将' position:relative '赋予主<li> ，该主<li>会被下拉，当它的子元素<ul>变为position:absolute时将会改变，以使其相对亲代。 给定width:100%将解决您的问题。