Question

我正在尝试CSS的“ flex”。我无法使导航栏向右移动。我已经尝试使用保证金，更改显示内容，使用浮点数小时了。它不会通过中间...抱歉，我还在学习

我粘贴了我的代码笔链接，以向您展示更好的图片：

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容器中的可用空间。

修复3

非灵活框方式是向#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：这将迫使元素左右移动。另一种方法是放置位置：绝对位置；绝对位置。正确：0；到导航栏容器，但第一种方法是更清洁。

CSS导航栏未使用Flex右对齐

3 个答案: