无法水平对齐导航栏中的链接和徽标

Question

我正在尝试水平对齐徽标和链接，但由于某种原因它会堆叠起来，如下图所示。

有人可以帮助我吗？

我已经包括了下面的所有 CSS。

body {
    font-family: Apercu, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    color: black;
    background-color: floralwhite;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
}

@media (min-width: 32em) {
    header {
        top: 2em;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding-right: 2em;
        padding-left: 2em;
    }
}

header {
    position: absolute;
    left: 0;
    right: 0;
    padding: 1em;
}

header h1 {
    font-weight: 500;
    font-size: 1.1em;
    color: black;
}

header nav a {
    text-decoration: none;
    background-color: transparent;
    margin-right: 1.25em;
    position: relative;
    transition: all .4s ease;
}

header a,
h1 {
    text-decoration: none;
}

header nav {
    display: flex;
    margin: 0;
    padding: 0;
}

<body>
    <header>
        <a href="index.html">
            <h1>Alokananda Y</h1>
        </a>
        <nav>
            <a href="">One</a>
            <a href="">Two</a>
            <a href="">Three</a>
            <a href="">Your Choice</a>
        </nav>
    </header>
    <section>
        <h2>Favorite Foods</h2>
        <ul>
            <li>Rice</li>
            <li>Beans</li>
            <li>Vegetables</li>
            <li>Fruits</li>
        </ul>
    </section>
</body>

我一直在尝试遵循此 post Aligning Logo and Nav Links Horizontally 但无法正确执行。

Answer 1

如果您想使用 position:absolute，则必须将 body 的间距作为您的总 header 高度。使用 position:absolute 更新 css

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding-top: 82px;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;    
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 1em;
    width: 100%;   
}
header nav {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    -webkit-align-items: center;
}

或
从 header 中删除位置样式并将样式添加到导航

header {
    padding: 1em;
}
header nav {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    -webkit-align-items: center;
}

无法水平对齐导航栏中的链接和徽标

Unable to horizontally align the links and the logo in the nav bar

html

css

nav