CSS使li元素出现在ul之外
考虑以下代码:
<div class="menu">
<ul>
<li class="active">I'm active!</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
我的 .menu div 有一个 1px 黑色边框,我的 .active 列表元素有白色背景。现在,我希望我的 .active 列表元素位于 div 的“外部”,并与边框重叠,将其部分隐藏在白色背景中。这是如何实现的?
来说明我想要的;
这就是我目前所拥有的,已编码的; https://i.sstatic.net/cVZHt.png
这就是它应该的样子; https://i.sstatic.net/gp2k2.png
Considering this code:
<div class="menu">
<ul>
<li class="active">I'm active!</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
My .menu div has a 1px black border, and my .active list element has a white background. Now, I want my .active list element to be "outside" of the div, and overlap with the border, hiding it partially with the white background. How is this achievable?
To illustrate what I want;
This is what I have at the moment, coded up;
https://i.sstatic.net/cVZHt.png
And this is what it should look like;
https://i.sstatic.net/gp2k2.png
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用相对定位。
为了确保其有效,需要注意以下几点:
ul
标记的一部分并且li
标记具有透明背景(当然图像除外)时,这才有效。否则,您可能会覆盖ul
元素的所有边框。还有一件事(只是因为)。你有这个:
ul 标签完全能够拥有一个自己的类。除非你有充分的理由不这样做,否则就这样做:
Use relative positioning.
Couple of things to note to make sure that this works:
ul
tag and theli
tag has a transparent background (other than the image of course). Otherwise you might cover up all of the border from theul
element.And one more thing (just 'cause). You have this:
The ul tag is perfectly capable of having a class by itself. Unless you have a very good reason not to, just do this:
为您提供一些 CSS 黑魔法。
下面的工作示例应该可以跨浏览器工作。请询问您是否需要解释其工作原理。
JSFiddle
享受吧。
Some CSS black magic for you.
Working example below which should work cross browser. Please ask if you would like an explanation how it works.
JSFiddle
Enjoy.
这是您要寻找的 z-index 吗?
那么您可以使用负边距将其定位在“外部”,或者更好的是嵌套另一个可以相对定位的元素。
Is it the z-index you're looking for?
then you could use negative margins to position it "outside", or better yet nest another element that you can position relatively.