Я новичок в вёрстке и не могу решить проблему. У меня есть ссылки, которые должны идти в ряд, При изменении масштаба окна сайта, весь ряд сыпется

Рейтинг: 0Ответов: 1Опубликовано: 29.06.2023

body {
  background-color: #fff;
  margin: 0px;
}

.header-line {
  top: 1px;
  margin-left: 138px;
  display: flex;
}
<html>
<body>
  <div class="header">
    <div class="header-line">
      <a href="#">О компании</a>
      <a href="#">Наши работы</a>
      <a href="#">Сертификаты и лицензии</a>
      <a href="#">Гарантии</a>
      <a href="#">Отзывы</a>
      <a href="#">Контакты</a>
    </div>
  </div>
</body>
</html>

html css3
Источник: Stack Overflow на русском

Ответы

▲ 0

Лучше всего сверстать на бутстрапе, как у меня в примере. А для мобильной версии лучше сделать выпадающее меню. Тогда ничего никуда не съедет

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>О компании</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <ul class="nav justify-content-center">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="#">О компании</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Наши работы</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Сертификаты и лицензии</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Гарантии</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Отзывы</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Контакты</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>