CSS 导航栏未使用 Flex 右对齐

Question

我正在尝试 "flex" 和 CSS。我无法让导航栏向右移动。我已经尝试了几个小时使用保证金、更改显示、使用浮动。它不会移动通过中间...抱歉我还在学习

我已将 link 粘贴到我的 codepen 以向您展示更好的图片：

https://codepen.io/Saharalara/pen/pGyQWZ

HTML

 <div id="page-wrapper">
 <header>
 <div class="logo">
  <img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic"> 
  <span id="logo-name">Minnie & Friends Inc</span>
 </div>
 <nav id="nav-bar">
  <ul id="nav-ul">
   <li class="nav-link"><a href="#stories">Stories</a><li>
   <li class="nav-link"><a href="#toys">Toys</a><li>
   <li class="nav-link"><a href="#suscribe">Suscribe</a></li>
 </ul>
</nav>
</header>
<body>
<container id="container1">
 <section>
  <h1 id="stories">Minnie & Friends Stories</h1>
   <p>
   <a href="#"> Here</a> you will find all of the best Minnie & Friends toys 
   and stories.
   Choose from a huge variety of stories and the happy gang and they go on 
   many adventures.
  </p>
   <section>
    <iframe id="video" height="180" src="https://www.youtube.com/watch? 
     v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
  </section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
  <a href="#">Here</a> you will also find many of your favourite characters 
   to choose from and order to arrive at your doorstep to continue their 
   adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>

Css

#page-wrapper {
 position: relative;
 color: black;
 margin: -9px;
 padding: 10px;
 border: 4px solid;
 border-radius: 3px;
 background-color: rgba(223, 42, 42, 0.20);
 padding: 10px 20px 20px 20px;
}

header {
 display: flex;
 font-size: 1.3em;
 margin-left: -10px;
 margin-right: -10px;
 background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink- 
 white-star-polka-dots-background-vector-7590766.jpg');
 opacity: 0.80;
}

#header-img {
 height: 120px;
}

#logo-name {
 font-size: 2em; 
 color: black;
}

h1,
h2,
h3 {
font-size: 2em;
}

//navigation bar

#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}

#nav-ul {
list-style-type: none;
display: flex;
}

nav li {
 padding: 4px;

}

//body

p {
 font-size: 1.2em;
}

#video {
 border: 5px solid;
 border-radius: 3px;
 color: pink;
}

Answer 1

修复 1

（对我而言）解决此问题的最佳方法是在 flex 容器（父级）级别控制布局。它简单明了。

header {
…
  justify-content: space-between;
}

修复 2

另一种方法是将 flex-grow: 1 添加到您的 #nav-bar。

#nav-bar {
  …
  flex-grow: 1;
}

在这种情况下，将 flex-grow 设置为 1 会告诉元素占用其 flex 容器中可用的 space。

修复 3

非 flexbox 方法是向 #nav-bar 添加一个自动左边距，有效地将其尽可能向右推。

#nav-bar {
  …
  margin-left: auto;
}

Answer 2

由于您的页眉显示：flex 属性，他的孩子就像 flex 项目一样。

因此，如果您想将整个 .nav-bar 向右移动，您必须将 margin-left: auto 设置为 .nav-bar，以便将元素推向右侧。

意味着 .nav-bar 将有尽可能大的边距，而不会从左侧换行，因此元素将向右移动。

Answer 3

由于 Header 元素是容器，只需添加 justifi-content: space-between;这将迫使元素向左和向右移动。另一种方法是放置 position: absolute;右：0；到导航栏容器，但第一种方式更干净。

CSS 导航栏未使用 Flex 右对齐

CSS Nav Bar not aligning to the right using Flex

css

alignment

nav

navbar

flexbox