如何使跨度宽度为父 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 的宽度。
最佳答案
就像其他人提到的那样,只需将您的跨度和 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 元素一样工作,它会填充其父元素的宽度。
关于html - 如何使跨度宽度为父 li 的 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31239654/