CSS Nav Bar не выравнивается вправо с помощью Flex - PullRequest
Новая
       24

CSS Nav Bar не выравнивается вправо с помощью Flex

0 голосов
/ 29 января 2019

Я пытаюсь "согнуть" с помощью CSS.Я не могу заставить свою навигационную панель двигаться вправо.Я пытался часами использовать маржу, менять дисплеи, использовать поплавок.Он не сдвинется с середины ... Извините, я все еще учусь

Я вставил ссылку на свой кодовый блок, чтобы показать вам лучшую картинку:

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;
}

Ответы [ 3 ]

0 голосов
/ 29 января 2019

, поскольку ваш заголовок имеет свойство display: flex, его дочерние элементы действуют как flex-элементы.

Так что, если вы хотите переместить целое .nav-bar вправо, вы должны установить margin-left: auto в .nav-bar, чтобыэлемент будет сдвинут вправо.

Значит, .nav-bar будет иметь настолько большой запас, насколько это возможно, не прерываясь на новую строку слева, поэтому элемент переместится вправо.

0 голосов
/ 29 января 2019

Поскольку элемент Header является контейнером, просто добавьте justifi-content: space -ween;и это заставит элементы идти влево и вправо.Другой способ - поставить позицию: абсолютная;справа: 0;к контейнеру nav-bar, но первый способ чище.

0 голосов
/ 29 января 2019

Fix 1

Лучший способ исправить это (для меня) - это управлять макетом на уровне flex-контейнера (родительского).Это просто и декларативно. 

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

Исправление 2

Другой способ - добавить flex-grow: 1 к вашему #nav-bar. 

#nav-bar {
  …
  flex-grow: 1;
}
* 1016.* В этом случае установка flex-grow на 1 говорит элементу о необходимости освободить место в его гибком контейнере.

Fix 3

НеПуть flexbox заключается в добавлении левого автоматического поля к #nav-bar, эффективно выдвигая его как можно дальше вправо. 

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