我试图将导航移动到网站的右上角,但导航没有响应并且停留在 Logo 下方。我已经尝试将 display: flex
添加到 UL、Nav 和其他 div 以及 position: relative
。我还应用了 justify-content: space-between
来尝试将元素隔开,但它们仍然打包在一起。这是所有代码所在的沙箱环境。任何帮助将不胜感激!
最佳答案
只需添加此 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 属性的工作原理
关于html - 导航不响应 CSS flexbox 命令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51549682/