html - 导航不响应 CSS flexbox 命令

Question

我试图将导航移动到网站的右上角，但导航没有响应并且停留在 Logo 下方。我已经尝试将 display: flex 添加到 UL、Nav 和其他 div 以及 position: relative。我还应用了 justify-content: space-between 来尝试将元素隔开，但它们仍然打包在一起。这是所有代码所在的沙箱环境。任何帮助将不胜感激!

Sandbox URL

Answer 1

只需添加此 flex 属性即可帮助您实现这一目标。

.site-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

这将有助于在左侧制作 Logo 并在右侧制作导航。但是要使导航真正位于右上角。你需要应用这个

    .main-navigation {
        clear: both;
        display: block;
        float: left;
        /* just add this line */
        align-self: flex-start;
    }

您可以引用此链接了解每个 flex 属性的工作原理

https://css-tricks.com/snippets/css/a-guide-to-flexbox/