Как сделать горизонтальное меню в html

Аватар пользователя Aleksey
Aleksey
06 апреля 2023

Для создания горизонтального меню в HTML можно использовать тег <nav> и набор связанных с ним тегов <ul> и <li>.

Пример кода для горизонтального меню:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Здесь создается навигационное меню с четырьмя пунктами: "Главная", "О нас", "Услуги" и "Контакты".

Стилизацию меню можно проводить с помощью CSS. Например, чтобы расположить пункты меню в одной строке, можно задать для тега <ul> свойство display: flex;:

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

nav li {
  margin-right: 20px;
}

nav a {
  color: #000;
  text-decoration: none;
}

Здесь также заданы стили для элементов списка <li> и ссылок <a>.

1 0

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