导航不响应 CSS flexbox 命令

Question

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

Sandbox URL

Answer 1

相对定位不应用于放置 - 您正在寻找的是 absolute 定位。

absolute 定位元素将从它最近的 relative 父元素（或 document.body）开始定位。

.menu-main-menu-container {
    position:absolute;
    right: 0;
    top: 0;
}

会出现 space-between 问题，因为您的宽度当前等于内容的宽度。如果您希望 space 这些项目分开，您应该增加 .menu-main-menu-container 元素的宽度，或者向您的列表项目添加填充（我建议后者）

#primary-menu > li {
    padding: 0 20px;
}

Answer 2

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

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

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

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

您可以参考此 link 了解每个 flex 属性的工作原理

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

Answer 3

请在做任何事情之前确保你删除了你之前做的任何 flexbox 或 float。

现在您必须编辑 Wordpress 模板并将整个 nav 移动到 body 之后但 [ 之前=29=] id="page" 如下所示。

<body class="home blog wp-custom-logo hfeed" cz-shortcut-listen="true">
    <nav id="site-navigation" class="main-navigation">
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
        <div class="menu-main-menu-container">
            <ul id="primary-menu" class="menu nav-menu" aria-expanded="false"><li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-14"><a href="http://dev-wisco-radio.pantheonsite.io/2018/06/08/hello-world/">Hello world!</a></li>
                <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://dev-wisco-radio.pantheonsite.io/sample-page-3/">sample page</a></li>
                <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://dev-wisco-radio.pantheonsite.io/sample-page-2/">sample page</a></li>
                <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://dev-wisco-radio.pantheonsite.io/sample-page/">Sample Page</a></li>
            </ul>
        </div>
    </nav>
<div id="page" class="site">

然后将此代码放入您的自定义 wordpress CSS

#primary-menu{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 10px;
   right: 0;
   text-align: right;
}
#site-navigation{
  float: right;
}

you can see how is working on this pen GO TO CODEPEN

导航不响应 CSS flexbox 命令

Navigation not responding to CSS flexbox commands

html

css

wordpress

sass

navigationbar