如何使跨度100％的父李？

Question

如何制作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并使每个跨度达到ul的宽度。

Answer 1

与其他人提到的一样，只需将您的范围和锚标记更改为display: block即可解决当前问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是因为span自然是一个内联元素，它不会填充它的父元素的宽度。当您将其更改为display: block时，您会将其视为块元素，这会填充其父元素的宽度。

Answer 2

请尝试：

span{
    display:block;
}

Demo

Answer 3

请尝试以下款式

li span {display:block; width: 100%; overflow: hidden;}
li span a{display: inline-block; float:left;}

Answer 4

您可以将显示：块添加到范围，或使其更正确并更改它而不是像div这样的块元素。将内联元素和块元素嵌套在内联元素中是一种不好的做法。你可以试试这个

 <li><a href="#">About</a>
    <div>
          <a href="#">One</a>
          <a href="#">Three</a>
          <a href="#">Four</a>
    </div>
 </li>

CSS

 li div a { 
       width: 100%;
       display: block;
       box-sizing: border-box;
       padding: 20px;
 }