Pu sh деление вправо

Question

Я кодирую меню на французском, но мне нужно переместить все кнопки (Главная, О нас ...) вправо.

Я пытался с float: right;, но он не работает.

Вот мой результат:

Мой результат

<a> Home, Informations, et c .. находятся в div. Именно этот div я хочу сделать sh правильно!

Моя цель:

Моя цель

Мой код:

/*
  
            ==============================
            NAVBAR
            ==============================
  
            */

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #9ebd11/*55d6aa*/
  ;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  /*padding: 10px 0;*/
}

nav {
  float: right;
}

nav #navbar-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav .navbar-li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
}

nav .navbar-button {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav .navbar-button:hover {
  color: #000;
}

nav .navbar-button::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav .navbar-button:hover::before {
  width: 100%;
}

nav #register-li {
  /*display: inline-block;*/
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
}

nav #register-button {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav #login-li {
  /*display: inline-block;*/
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
}

nav #login-button {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

ul {
  list-style-type: none;
}

nav,
.container {
  display: flex;
}

.connection {
  line-height: 2;
}

<header>
  <div class="container">

    <h1 class="logo">
      <a href="#"><img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image"></a>
    </h1>

    <nav>
      <ul id="navbar-ul">
        <li class="navbar-li"><a href="#" class="navbar-button">Home</a></li>
        <li class="navbar-li"><a href="#" class="navbar-button">Informations</a></li>
        <li class="navbar-li"><a href="#" class="navbar-button">About us</a></li>
      </ul>
      <ul class="connection">
        <li><a href="" target="_blank" id="register-button">S'inscrire</a></li>
        <li><a href="" target="_blank" id="login-button">Se connecter</a></li>
      </ul>
    </nav>
  </div>
</header>

Спасибо

Answer 1

Float не будет работать, потому что ваш контейнер является flex-контейнером.

Просто используйте: justify-content: space -ween`

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #9ebd11/*55d6aa*/
  ;
}

nav #navbar-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav .navbar-li {
  display: inline-block;
  padding-top: 23px;
  position: relative;
}

nav .navbar-button {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav .navbar-button:hover {
  color: #000;
}

nav .navbar-button::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav .navbar-button:hover::before {
  width: 100%;
}

nav #register-li {
  /*display: inline-block;*/
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
}

nav #register-button {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav #login-li {
  position: relative;
}

nav #login-button {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

ul {
  list-style-type: none;
}

nav,
.container {
  display: flex;
  justify-content: space-between;
}

.connection {
  line-height: 2;
}

<header>
  <div class="container">

    <h1 class="logo">
      <a href="#"><img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image"></a>
    </h1>

    <nav>
      <ul id="navbar-ul">
        <li class="navbar-li"><a href="#" class="navbar-button">Home</a></li>
        <li class="navbar-li"><a href="#" class="navbar-button">Informations</a></li>
        <li class="navbar-li"><a href="#" class="navbar-button">About us</a></li>
      </ul>
      <ul class="connection">
        <li><a href="" target="_blank" id="register-button">S'inscrire</a></li>
        <li><a href="" target="_blank" id="login-button">Se connecter</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 2

удалите float: right из вашего .nav и добавьте float:left из .logo

Теперь добавьте display:flex к вашему .logo, а для вашего контейнера добавьте:

.container{
 justify-content: space-between;
}

Я не проверял это. Дайте мне знать, если вы этого хотели.

Answer 3

Максимальная ширина класса «Контейнер»

Bootstrap составляет примерно 1800 пикселей (точный подсчет пикселей не определен).

Попробуйте использовать «контейнер-жидкость». Это должно позволить навигационным элементам перемещаться в крайнее правое положение, но, вероятно, переместит ваш lo go в крайнее левое положение из-за вашего .lo go float-left css.

. Вы можете дать lo go поле слева, которое работает для вас.

Редактировать: Я только что заметил, что вы определили свой собственный класс .container в css. И поле установлено на 0 авто. Это приведет к центрированию вашего контента в классе контейнера и предоставит вам максимальную ширину 80%, чтобы ваш контент не попал в крайнюю правую часть браузера, если вы не установите эти элементы в «position: absolute», а затем дадите им необходимые поля.

Answer 4

Попробуйте изменить класс навигации с:

nav{
  floaf: right;
}

на:

nav{
  position: absolute;
  right: 20px;
  top: 0px;
}

Это должно заставить ваш элемент навигации позиционироваться это справа 20px слева от родительских элементов справа. Протестировано в chrome.