Question

我正在使用下拉菜单，但我遇到内部ul大小的问题我试图使其与父li的大小相同。< / p>

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

Here是我代码的演示。

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

ul元素始终（默认情况下）有一些填充。所以你应该添加：

ul {
  padding: 0px;
}

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

ul li {
 width: 300px;
}

Answer 2

备注：

为了使 ul 元素与 li 父元素一样宽，您必须将其位置更改为< strong> position: relative ，以便您可以使用 width: 100% 。
然后您必须从 overflow: hidden 中删除 ul.topMenu 并设置固定高度。设置 height: 42px 会很好。

<强>代码：

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

ul.topMenu {
    height: 42px;
}

jsFiddle：→here。

<强>段：

* {
  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意外填充。你需要通过添加自己的样式来否定这种样式。例如，缓解此问题的一种方法是添加style =“padding：0;”有问题的ul。 Screenshot

Answer 4

如果我们谈论您需要提供的代码＆＃39; position:relative＆＃39>，最好多了解一下职位。到主要<li>这将是下拉列表，当它的孩子我的意思是<ul>得到position:absolute时，它会改变为它的相对父母。给width:100%将解决您的问题。

如何制作与父李相同尺寸的尺码？

4 个答案: