导航不响应 CSS flexbox 命令答案

【问题标题】：Navigation not responding to CSS flexbox commands导航不响应 CSS flexbox 命令
【发布时间】：2018-07-27 01:44:40
【问题描述】：

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

Sandbox URL

【问题讨论】：

标签： html css wordpress sass navigationbar

【解决方案1】：

只需添加这个 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;
    }

你可以参考这个链接了解每个 flex 属性是如何工作的

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

【讨论】：

我还必须添加 #primary-menu > li { padding: 0 20px; } 以确保项目没有堆叠在一起
@bbestul：是的，这是一种方法，或者您也可以在菜单项中使用休闲裤
@bbestul 对不起，我的意思是 flex

【解决方案2】：

不应使用相对定位来放置 - 您要查找的是 absolute 定位。

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

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

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

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

【讨论】：

【解决方案3】：

在做任何其他事情之前，请确保您删除了您之前所做的任何 flexbox 或浮动。

现在您必须编辑您的 Wordpress 模板并将整个 nav 移动到 body 之后但在 div 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;
}

你可以看到这支笔的工作情况 GO TO CODEPEN

【讨论】：