位置：绝对中断边距左：自动

Question

我正在尝试使用容器上的 margin-left: auto 和 display: flex 将我的汉堡菜单放置在导航的右侧。当我给出导航位置：绝对时，它会中断。我需要做什么？

HTML

<section class="nav">
    <div class="nav-items">
        <a href=""><h2 class="logo">logo</h2></a>
        <div class="hamburger">
            <div class="hamburger-lines"></div>
        </div>
    </div>
</section>

CSS

.nav {
    position: absolute;
}
.nav-items {
    display: flex;
}
.hamburger {
    margin-left: auto;
}

Answer 1

因为您没有设置 宽度，它会中断。尝试将宽度设置为 100%

.nav {
    position: absolute;
    width: 100%;
}