CSS使li元素出现在ul之外

发布于 2024-11-14 14:27:17 字数 674 浏览 1 评论 0原文

考虑以下代码:

<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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

还在原地等你 2024-11-21 14:27:17

使用相对定位。

.menu li {
    position: relative;
    top: 1px;
}

为了确保其有效,需要注意以下几点:

  • 事实上,这是在所有 li 元素上是有意为之的。如果我只将它放在所选的一项上,那么所选的一项就会出现下移。
  • 仅当蓝色背景是 ul 标记的一部分并且 li 标记具有透明背景(当然图像除外)时,这才有效。否则,您可能会覆盖 ul 元素的所有边框。

还有一件事(只是因为)。你有这个:

<div class="menu">
<ul>
...
</ul>
</div>

ul 标签完全能够拥有一个自己的类。除非你有充分的理由不这样做,否则就这样做:

<ul class="menu">
    ...
</ul>

Use relative positioning.

.menu li {
    position: relative;
    top: 1px;
}

Couple of things to note to make sure that this works:

  • The fact that this is on all li elements is intentional. If I only put it on the selected one then the selected one would appear shifted down.
  • This will only work if the blue background is a part of the ul tag and the li tag has a transparent background (other than the image of course). Otherwise you might cover up all of the border from the ul element.

And one more thing (just 'cause). You have this:

<div class="menu">
<ul>
...
</ul>
</div>

The ul tag is perfectly capable of having a class by itself. Unless you have a very good reason not to, just do this:

<ul class="menu">
    ...
</ul>
-小熊_ 2024-11-21 14:27:17

为您提供一些 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.

睡美人的小仙女 2024-11-21 14:27:17

这是您要寻找的 z-index 吗?

div.menu li.active { z-index: 99; ... } 

那么您可以使用负边距将其定位在“外部”,或者更好的是嵌套另一个可以相对定位的元素。

Is it the z-index you're looking for?

div.menu li.active { z-index: 99; ... } 

then you could use negative margins to position it "outside", or better yet nest another element that you can position relatively.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文