html - 如何使跨度宽度为父 li 的 100%？

Question

如何使跨度宽度为父 li 的 100%

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <span>
              <a href="#">One</a>
              <a href="#">Three</a>
              <a href="#">Four</a>
        </span>
    </li>
    <li><a href="#">Services</a>
        <span>
              <a href="#">One</a>
              <a href="#">Two</a>
              <a href="#">Three</a>
        </span>
    </li>
    <li><a href="#">Responsibility</a>
        <span>
              <a href="#">One</a>
              <a href="#">Two</a>
        </span> </li>
    <li><a href="#">Contact</a></li>
  </ul>

我有这样的导航栏。它显示为:

我想要的是:

我怎样才能做到这一点？当我尝试 width:100%; 跨度时，它会超出 li 并使每个跨度 a 达到 ul 的宽度。

Answer 1

就像其他人提到的那样，只需将您的跨度和 anchor 标记更改为 display: block 即可解决眼前的问题。

li:hover span, li:hover span a {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: blue;
}

ul {
  list-style: none;
  background-color: black;
  height: 40px;
  display: flex;
}

ul li {
  position: relative;
  line-height: 40px;
  width: 20%;
  text-align: center;
}

a {
  color: white;
  text-decoration: none;
}

span, span a {
  display: none;
}

span {
  position: absolute;
  width: 100%;
}

span a {
  border-bottom: 1px solid black;
  text-align: center;
}

li:hover, span {
  background: red;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <span>
              <a href="#">One</a>
              <a href="#">Three</a>
              <a href="#">Four</a>
        </span>
  </li>
  <li><a href="#">Services</a>
    <span>
              <a href="#">One</a>
              <a href="#">Two</a>
              <a href="#">Three</a>
        </span>
  </li>
  <li><a href="#">Responsibility</a>
    <span>
              <a href="#">One</a>
              <a href="#">Two</a>
        </span> </li>
  <li><a href="#">Contact</a></li>
</ul>

这是因为 span 自然是一个内联元素，不会填满其父元素的宽度。当您将它更改为 display: block 时，您是在告诉它像 block 元素一样工作，它会填充其父元素的宽度。