Горизонтальное меню

https://webref.ru/course/float/use

by fersterin

HTML

<ul>
   <li><a href="#home">Главная</a></li>
   <li><a href="#news">Новости</a></li>
   <li><a href="#about">О нас</a></li>
   <li><a href="#contact">Контакты</a></li>
  </ul>
  <h1>Добро пожаловать на сайт</h1>

CSS

ul {
    background: #0083ca; /* Цвет фона */
    list-style: none; /* Убираем маркеры */
    margin: 0; padding: 0; /* Обнуляем все отступы */
    overflow: hidden; /* Отменяем обтекание */
   }
   li {
    float: left; /* Выстраиваем по горизонтали */
   }
   a {
    display: block; /* Блочный элемент */
    padding: 7px 15px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
   }