CSS 使 li 元素出现在 ul 之外

Question

考虑这段代码:

<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 的“外部”，并与边框重叠，将其部分隐藏在白色背景中。这是如何实现的？

为了说明我想要什么；

这就是我目前所拥有的，已编码； http://i.stack.imgur.com/cVZHt.png

这就是它应该的样子； http://i.stack.imgur.com/gp2k2.png

Answer 1

使用相对定位。

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

要确保这有效，需要注意几件事:

• 这是在所有 li 元素上的事实是有意的。如果我只将它放在选定的对象上，则选定的对象会向下移动。
• 这仅在蓝色背景是 ul 标签的一部分并且 li 标签具有透明背景(当然除了图像)的情况下有效。否则，您可能会覆盖 ul 元素的所有边框。

---

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

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

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

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