Question

我在绝对定位的元素中遇到边距问题。

正如在另一个问题中已经回答的那样，绝对定位元素中的边距由第一个不是静态定位的父容器决定。

CSS absolute positioned elements and margins

以下示例是多级下拉菜单的简化版本，其中列表项是动态生成的。意思是不可能事先知道实际宽度（除非实现了一些javascript）。 “＆gt;”黄色背景表示另一个下拉级别。我希望在文本末尾和“＆gt;”之间有 5px页边距。

ul.level1 {
    position: relative;
    border: 1px solid black;
    width: 100px;
}

ul.level2 {
    position: absolute;
    border: 1px solid red;
}

span.right {
    margin-left: 5px;
    float: right;
    border: 1px solid black;
    background-color: yellow;
}

li {
    white-space: nowrap;
    border: 1px solid blue;
}


<ul class="level1">
    <li>Link1</li>
    <li>Link2
        <ul class="level2">
            <li><span class="right">></span>Fear is the path to the dark side</li>
        </ul>
    </li>
</ul>

我注意到当我将margin-left设置为大约190px时，“＆gt;”开始向右移动。意味着边距确实是针对非静态定位的父级设置的，这是父级li元素。

我可以使用css获得保证金吗？

由于

Answer 1

而不是<li><span class="right">></span>Fear is the path to the dark side</li>
使用
<li>Fear is the path to the dark side <span class="right">></span></li>
并从float : right

中删除.right

Answer 2

只想使用弹性框发布可能的解决方案。这在firefox，chrome和IE11中都没问题。但是，它不适用于较旧的IE版本，其中“＆gt;”将不会一个接一个地对齐。

li元素变为flex-box（display：flex），在元素之间用相等的空格对齐（justify-content：space-between）。跨度不再浮动。

ul.level1 {
    position: relative;
    border: 1px solid black;
    width: 100px;
}

ul.level2 {
    position: absolute;
    border: 1px solid red;
}

span.right {
    margin-left: 5px;
    border: 1px solid black;
    background-color: yellow;
}

li {
    white-space: nowrap;
    border: 1px solid blue;
    display: flex;
    justify-content: space-between;
}

<ul class="level1">
    <li>Link1</li>
    <li>Link2
        <ul class="level2">
            <li>Fear is the path to the dark side<span class="right">></span></li>
            <li>Fear leads to anger<span class="right">></span></li>
        </ul>
    </li>
</ul>

小提琴已更新。

CSS了解绝对定位元素中的边距

2 个答案: