Выровнять разные элементы по горизонтали в заголовке

Question

Я хочу совместить 3 разных элемента в моем меню, я пробовал много вещей, но безуспешно.

index.html:

<header>
  <nav class="main-menu">
    <img class="logo" src="img/teste.svg" alt="">
    <ul class="links-menu">
      <li><input type="text" name="" value=""></li>
      <li>Carreiras & Formações</li>
      <li>Para Empresas</li>
      <li>Como Funciona</li>
    </ul>
    <ul class="register-menu">
      <li>Entrar</li>
      <button type="button" name="button">Matricule-se</button>
    </ul>
  </nav>
</header>

default.css:

header {
  background: rgb(28, 119, 149);
  width: 70%;
  height: 4.5em;
  margin: .5em 15%;
  border-bottom: #8a8a8a;
  border-width: .2em;
  border-style: solid;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}

.main-menu{
  width: 100%;
  display: inline-block;
}

li {
  display: inline;
}

Есть также файл reset.css, указанный в HTML, любая помощь?

Answer 1

попробуйте, надеюсь, это тоже сработает.

.main-menu {
  width: 100%;
  display: inline-flex;

}

Внесите эти изменения в класс главного меню

Answer 2

Один из способов сделать это - настроить элементы UL и установить для свойства display значение display: inline-block. Я бы сделал то же самое с вашими li элементами, чтобы вы могли настроить отступы и поля для них. См. Мой пример ниже (обратите внимание, я бы просмотрел его в режиме «полная страница», чтобы получить полный результат)

header {
  background: rgb(28, 119, 149);
  width: 70%;
  height: 4.5em;
  margin: .5em 15%;
  border-bottom: #8a8a8a;
  border-width: .2em;
  border-style: solid;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}

.main-menu{
  width: 100%;
  display: inline-block;
}

ul {
  padding-left: 0;
}

ul, li {
  display: inline-block;
}

<header>
  <nav class="main-menu">
    <img class="logo" src="img/teste.svg" alt="">
    <ul class="links-menu">
      <li><input type="text" name="" value=""></li>
      <li>Carreiras & Formações</li>
      <li>Para Empresas</li>
      <li>Como Funciona</li>
    </ul>
    <ul class="register-menu">
      <li>Entrar</li>
      <li>
        <button type="button" name="button">Matricule-se</button>
      </li>
    </ul>
  </nav>
</header>

Answer 3

Вы пробовали использовать flexbox? Что-то вроде:

header {
  background: rgb(28, 119, 149);
  width: 100%;
  height: 4.5em;
  border-bottom: #8a8a8a;
  border-width: .2em;
  border-style: solid;
  text-align: center;
  text-transform: uppercase;
}

.main-menu{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links-menu, .register-menu {  
  list-style: none;
}

.links-menu li{  
  display: inline-block;
  margin: 5px; 
}

<header>
  <nav class="main-menu">
    <img class="logo" src="img/teste.svg" alt="">
    <ul class="links-menu">
      <li><input type="text" name="" value=""></li>
      <li>Elements</li>
      <li>Para Empresas</li>
      <li>Como Funciona</li>
    </ul>
    <ul class="register-menu">
      <li>Entrar</li>
      <button type="button" name="button">Matricule-se</button>
    </ul>
  </nav>
</header>

Answer 4

Элементы списка в вашем коде уже выровнены по горизонтали с использованием предоставленного вами CSS.