CSS Nav Bar 未使用 Flex 向右对齐答案

【问题标题】：CSS Nav Bar not aligning to the right using FlexCSS Nav Bar 未使用 Flex 向右对齐
【发布时间】：2019-06-21 23:08:29
【问题描述】：

我正在尝试使用 CSS 的“flex”。我无法让导航栏向右移动。我已经尝试了几个小时使用边距，更改显示，使用浮动。它不会通过中间...对不起我还在学习

我已将链接粘贴到我的 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;
}

【问题讨论】：

标签： css flexbox alignment navbar nav

【解决方案1】：

修复 1

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

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

修复 2

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

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

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

修复 3

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

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

【讨论】：

非常感谢安迪。我用了第一个，它奏效了！也欣赏 3 种不同的选择。很有帮助:)

【解决方案2】：

因为你的标题有 display: flex 属性，他的孩子就像弹性项目一样。

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

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

【讨论】：

非常感谢。这真的很有帮助:)

【解决方案3】：

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

【讨论】：

非常感谢您的帮助:)