Выравнивание 3 деления рядом на панели навигации

Question

Я пытаюсь выровнять 3 деления рядом на панели навигации. Я провел последние 5 часов, пытаясь понять это, и я знаю, что это что-то очень простое, что я не могу просто обернуть голову.

Вот где я сейчас нахожусь.

Если я плаваю по правому краю div, теги Join & Support укладывают друг на друга.

<div id="sticky-nav">
    <div class="container">
        <div class="box">
            <div class="align-left">
                <a href="javascript:void(0)" class="active">Home</a> <a
                    href="javascript:void(0)">Listings</a>
            </div>
            <div class="align-center">
                <form action="/action_page.php">
                    <input type="text" placeholder="Search..">
                    <button type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </form>
            </div>
            <div class="align-right">
                <a href="javascript:void(0)">Join</a> <a
                    href="javascript:void(0)">Support</a>
            </div>
        </div>
    </div>
</div>

#sticky-nav {
    overflow: hidden;
    background-color: #7889D6;
    position: fixed;
    top: 0;
    width: 100%;
}

#sticky-nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

#sticky-nav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    max-width: 300px;
    width: 100%;
}

#sticky-nav button {
    padding: 6px 10px;
    padding-top: 1px; margin-top : 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

#sticky-nav a:hover {
    background-color: #ddd;
    color: black;
}

#sticky-nav a.active {
    background-color: #4CAF50;
    color: white;
}

.container {
    display: table;
    width: 100%;
}

.box {
    display: table-row;
}

.align-left {
    width: 33%;
    text-align: justify;
    display: table-cell;
    padding: 10px;
}

.align-center {
    width: 33%;
    text-align: justify;
    display: table-cell;
    padding: 10px;
}

.align-right {
    width: 33%;
    display: table-cell;
    padding: 10px;
    text-align: right;
}

EDIT: Это макет, который я пытаюсь достичь,

Answer 1

Я вижу, что вы используете display: table для достижения этого эффекта. Я очень рекомендую сначала прочитать больше, прежде чем продолжить работу или проект. Вот некоторые концепции компоновки: grid и flex . В вашем случае мы можем использовать концепцию flexbox для решения вашей проблемы.

flex в основном это метод, который позволяет более легко распределять пространство между элементами. В вашем случае вы можете получить то, чего пытаетесь достичь, используя flex-grow и flex-basis. flex-basis определяет, каким изначально должен быть длинный / высокий элемент внутри гибкого контейнера. flex-grow определяет, как элемент внутри гибкого контейнера может расширяться (расти) по ширине / высоте в зависимости от оставшегося пространства контейнера.

В вашем случае мы можем просто установить ширину гибкого контейнера (ваше обертывание). div) до 100%. Чтобы равномерно распределить пространство между элементами, мы можем установить начальную ширину всех элементов равной 0. Затем равномерно распределить оставшееся пространство контейнера (которое по-прежнему составляет 100%), используя flex-grow в 1 для каждый элемент flexbox. Однако это сделает все элементы одинаковыми по ширине. Чтобы сделать центральный div шире, вы можете установить flex-grow в 2. Это позволит сделать так, чтобы левый div, center div и right div имели 25%, 50% и 25% от оставшихся контейнера. пространство по ширине соответственно. Я действительно рекомендую прочитать дальше о flex, чтобы понять, что я имею в виду. После прочтения о flex в приведенной выше ссылке, попробуйте посетить this и this , чтобы узнать больше о flex-basis и flex-grow.

Вот рабочее решение с использованием flex. Опять же, я рекомендую прочитать больше о flex, чтобы вы могли лучше использовать flex.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

body,
html {
  width: 100%;
  height: 100%;
}

#wrapper {
  display: flex;
  width: 100%;
}

#wrapper * {
  padding: 30px;
  text-align: center;
  color: white;
}

.left-align,
.right-align {
  flex-basis: 0;
  flex-grow: 1;
}

.center-align {
  flex-basis: 0;
  flex-grow: 2;
}

.left-align {
  background: #121212;
}

.center-align {
  background: #232323;
}

.right-align {
  background: #454545;
}

<div id="wrapper">
  <div class="left-align">Some content</div>
  <div class="center-align">Some content</div>
  <div class="right-align">Some content</div>
</div>

Answer 2

Я создал простой пример для вашего макета. Вы можете добиться этого, используя flex box, т.е.

.box{
        display: flex;
        width:100%;
        justify-content:space-between;
      }

Вот ссылка: https://codesandbox.io/s/optimistic-euclid-xmv6h

Надеюсь, что ответ на ваш вопрос.