Горизонтальные списки через CSS

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 18
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Горизонтальные списки — один из фундаментальных блоков в веб-вёрстке. Изначально любой список в HTML является вертикальным (блочным), но для создания навигационных меню, панелей инструментов или галерей нам почти всегда нужно располагать его элементы в одну строку. В этой серии заданий вы отработаете основные техники превращения стандартного вертикального списка в горизонтальный. Мы начнём с базовых свойств CSS, таких как `display`, и постепенно перейдём к более мощным и современным инструментам, таким как Flexbox и Grid. Вам предстоит работать с готовыми CSS-стилями, вписывая недостающие части HTML-кода, чтобы добиться нужного визуального результата.
Список тем

Самый простой способ: display: inline

id: 37831_horizontal-lists-1

Перед вами стандартный вертикальный список. В CSS уже подготовлено правило для класса `inline-menu`, которое меняет отображение элементов списка на строчное. Ваша задача — правильно составить HTML-структуру списка и применить к нему нужный класс, чтобы меню стало горизонтальным.

CSS
.inline-menu {
  list-style-type: none; /* Убираем маркеры */
  padding: 0;
  margin: 0;
}

.inline-menu li {
  display: inline; /* Отображаем как строчный элемент */
  margin-right: 15px;
}

.inline-menu a {
  text-decoration: none;
  color: #007bff;
}
HTML
<input1 class="inline-menu">
  <input2><a href="#">Главная</a></input2>
  <input2><a href="#">Каталог</a></input2>
  <input2><a href="#">Контакты</a></input2>
</input1>
Чтобы создать список, используется тег `<ul>` (unordered list). Внутри него каждый пункт создаётся с помощью тега `<li>` (list item). Чтобы применились стили, главному тегу `<ul>` нужно добавить атрибут `class` со значением `inline-menu`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Улучшенный способ: display: inline-block

id: 37831_horizontal-lists-2

Метод `display: inline` имеет недостаток: элементам нельзя задать вертикальные отступы. Свойство `inline-block` решает эту проблему. В CSS подготовлен класс `inline-block-menu`. Примените его к списку, чтобы он стал горизонтальным и элементы получили внутренние отступы.

CSS
.inline-block-menu {
  list-style: none;
  padding: 0;
}

.inline-block-menu li {
  display: inline-block; /* Позволяет задавать отступы */
  background-color: #f2f2f2;
  padding: 10px 15px;
  border-radius: 5px;
  margin: 0 5px;
}
HTML
<ul input1="inline-block-menu">
  <li>Профиль</li>
  <li>Сообщения</li>
  <li>Настройки</li>
</ul>
Структура HTML остаётся прежней (`ul > li`). Ваша задача — добавить тегу `<ul>` атрибут `class` и указать в качестве его значения имя класса из CSS — `inline-block-menu`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Старый, но важный метод: float

id: 37831_horizontal-lists-3

До появления Flexbox для создания горизонтальных списков часто использовали свойство `float`. Элементы как бы 'всплывают' и прижимаются друг к другу. В CSS есть класс `float-nav`. Примените его и посмотрите на результат. Обратите внимание на специальный псевдоэлемент `::after` для родителя, который решает проблему 'схлопывания' контейнера.

CSS
.float-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden; /* Альтернатива clearfix */
}

.float-nav li {
  float: left; /* Заставляем элементы 'всплывать' влево */
}

.float-nav a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
  border-right: 1px solid #ccc;
}

.float-nav li:last-child a {
  border-right: none;
}
HTML
<ul class="input1">
  <li><a href="#">Всё</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Видео</a></li>
</ul>
Вам нужно указать правильное имя класса для тега `<ul>`. Оно уже дано в описании — `float-nav`. Это значение нужно подставить в кавычки атрибута `class`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Современный подход: Flexbox

id: 37831_horizontal-lists-4

Flexbox — мощный инструмент для выравнивания элементов. Чтобы превратить контейнер во flex-контейнер, ему достаточно задать свойство `display: flex`. В CSS уже есть класс `flex-menu`. Ваша задача — создать `div` обертку для ссылок и применить к ней этот класс.

CSS
.flex-menu {
  display: flex; /* Делаем контейнер гибким */
  background-color: #333;
  padding: 10px;
  border-radius: 8px;
}

.flex-menu a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  margin: 0 5px;
}

.flex-menu a:hover {
  background-color: #555;
  border-radius: 5px;
}
HTML
<input1 class="input2">
  <a href="#">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Услуги</a>
  <a href="#">Портфолио</a>
</input1>
Создайте тег `<div>`. Внутри него разместите уже существующие ссылки `<a>`. Затем добавьте тегу `<div>` атрибут `class` со значением `flex-menu`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выравнивание во Flexbox

id: 37831_horizontal-lists-5

Flexbox позволяет легко управлять выравниванием. Свойство `justify-content` распределяет элементы по главной оси. В CSS, помимо класса `flex-nav`, есть класс-модификатор `justify-center`. Добавьте оба класса к списку, чтобы создать навигацию, центрированную по горизонтали.

CSS
.flex-nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #eee;
}

.flex-nav li a {
  display: block;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
}

/* Класс для выравнивания */
.justify-center {
  justify-content: center; /* Центрируем элементы */
}
HTML
<ul class="flex-nav input1">
  <li><a href="#">Товар 1</a></li>
  <li><a href="#">Товар 2</a></li>
  <li><a href="#">Товар 3</a></li>
</ul>
Чтобы применить несколько классов к одному элементу, их имена нужно перечислить в атрибуте `class` через пробел. Например: `class="class1 class2"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Горизонтальный список через CSS Grid

id: 37831_horizontal-lists-6

CSS Grid — еще одна мощная технология для создания раскладок. С помощью `display: grid` и `grid-auto-flow: column` можно легко расположить элементы в ряд. Ваша задача — завершить создание навигационной панели, применив к ней готовый CSS класс.

CSS
.grid-nav {
  display: grid;
  grid-auto-flow: column; /* Располагаем элементы в колонки */
  justify-content: start; /* Выравнивание сетки */
  gap: 20px; /* Пространство между элементами */
  align-items: center;
  padding: 10px;
  background: #eef5ff;
}
.grid-nav img {
  height: 24px;
}
.grid-nav span {
  font-family: sans-serif;
}
HTML
<input1 class="input2">
  <img src="https://naytikurs.ru/img/11s.svg" alt="Иконка">
  <span>Профиль</span>
  <img src="https://naytikurs.ru/img/12s.svg" alt="Иконка">
  <span>Сообщения</span>
</input1>
Необходимо указать тег-обертку. Семантически для навигации лучше всего подходит тег `<nav>`. Затем ему нужно присвоить класс `grid-nav`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексная навигация с логотипом

id: 37831_horizontal-lists-7

Соберем всё вместе. Создайте навигационную панель, где логотип находится слева, а список ссылок — справа. Это классическая задача, которая идеально решается с помощью Flexbox и свойства `justify-content: space-between`. Заполните пропуски в HTML, чтобы получить нужную структуру.

CSS
.main-header {
  display: flex;
  justify-content: space-between; /* Разносит элементы по краям */
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.logo img {
  height: 30px;
  display: block;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  margin-left: 20px;
  text-decoration: none;
  color: #555;
}
HTML
<nav class="input1">
  <div class="logo">
    <img src="https://naytikurs.ru/img/11s.svg" alt="Логотип">
  </div>
  
  <input2 class="nav-links">
    <input3><a href="#">Главная</a></input3>
    <input3><a href="#">Блог</a></input3>
    <input3><a href="#">Войти</a></input3>
  </input2>
</nav>
Основному контейнеру `<nav>` нужен класс `main-header`. Внутри него должно быть два дочерних элемента: `div` с логотипом и список `<ul>` со ссылками. Списку `<ul>` нужно присвоить класс `nav-links`, чтобы к нему применились стили flex.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру