HTML CSS положение деление левый центр правый

Question

У меня есть панель навигации: nav Я прочитал много статей о стековом потоке о позиционировании слева-по центру трех элементов div, и мне нравится этот способ, но он вроде не идеален, и я не знаю почему: * Стиль 1003 *

     <div class="topnav">
             <div class="topnav-left">
                 <a href="/">Home</a>
             </div>
             <div class="topnav-center">
                 <a href="/about-me">Logo</a>
             </div>
             <div class="topnav-right">
                 <a href="/login">Login</a>
             </div>

     </div>

. css

.topnav{
    text-align: center;}
.topnav-left{
    float:left;}
.topnav-right{
    float:right;}
.topnav-center{
    display: inline-block;}

Проблема в том, что когда я перенаправляю на одну и ту же страницу только с Home и Lo go (так что нет правой части) lo go движется немного вправо, как будто это зависело от наличия правой части. Может кто-нибудь объяснить мне, почему?

Answer 1

Вы можете легко решить эту проблему с помощью CSS flexbox. Подробнее о CSS flexbox на MDN .

Добавьте это CSS к .topnav:

      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

Что он делает? Это гарантирует, что оставшееся пространство между дочерними элементами контейнера (в данном случае три div внутри) распределено равномерно.

Один небольшой знак, использующий float для позиционирования элементов, больше не считается лучшей практикой.

.topnav {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  /* Styling */
  background: #eee;
  color: #fff;
  padding: 5px 0;
}

/* Styling */
body {
  margin: 0;
  padding: 0;
}

<div class="topnav">
  <div class="topnav-left">
    <a href="/">Home</a>
  </div>
  <div class="topnav-center">
    <a href="/about-me">Logo</a>
  </div>
  <div class="topnav-right">
    <a href="/login">Login</a>
  </div>
</div>

Редактировать Решение с левым и центральным элементом, вам просто нужно пустое div для правой части. Ниже приведен фрагмент кода.

.topnav {
  display: flex;
  flex-flow: row wrap;
  /* Styling */
  background: #eee;
  color: #fff;
  padding: 5px 0;
}

.topnav-left,
.topnav-right {
  flex: 1;
}


/* Styling */

body {
  margin: 0;
  padding: 0;
}

<div class="topnav">
  <div class="topnav-left">
    <a href="/">Home</a>
  </div>
  <div class="topnav-center">
    <a href="/about-me">Logo</a>
  </div>
  <div class="topnav-right">
  </div>
</div>