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

Я хочу выровнять 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, помощь?

Просто чтобы уточнить, какие именно 3 элемента вы имеете в виду? Кроме того, вы имеете в виду, что вы хотите выровнять по центру эти 3 указанных элемента, или вы хотите, чтобы все они были на одной базовой линии?

— 08.01.2019 23:24

<img> и два списка <ul>, и я хочу, чтобы все они были на одной базовой линии

— 08.01.2019 23:28

html css alignment

08.01.2019 23:17

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

104

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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

да, но я хочу, чтобы <img> и два списка <ul> были выровнены

— 08.01.2019 23:29

08.01.2019 23:25

Ответ принят как подходящий

Один из способов сделать это - настроить таргетинг на элементы 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>

08.01.2019 23:33

Вы пробовали использовать 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>

08.01.2019 23:34

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

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

}

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

09.01.2019 15:28

Другие вопросы по теме

Как я могу изменить этот CSS, чтобы сделать выпадающий эффект менее глючным?

Навбар не смещается вправо

Удалите символ # из URL-адреса

Наборы значков FontAwesome 5 не совпадают со стандартными значками

Сделать отображение кнопки воспроизведения при наведении курсора по одному изображению за раз

Невозможно центрировать панель навигации, и приходится нажимать само слово

Как переместить каждый элемент <li> на новую строку в вертикальном <nav>

Ширина элемента не 100% при наличии полос прокрутки

Bootstrap 4 Поведение при изменении размера ввода

Что определяет размер выбранного элемента при нажатии на него?

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

Ответы 4

Другие вопросы по теме

Похожие вопросы