0

Когда я верстаю сайт без выравнивания надписей в блоке меню в шапке - всё отображается так, как это мне нужно. Само меню шапки серого цвета. Вот код сайта и его внешний вид.

.container .head .logo {
  position: relative;
  height: 120px;
  width: 120px;
  float: left;
  display: inline-block;
}

.container .head .menu {
  position: relative;
  height: 120px;
  width: 60%;
  background: grey;
  display: inline-block;
  padding-left: 10px;
  margin-left: 10%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Страница 2</title>
  <link rel="stylesheet" type="text/css" href="page3.css">
  <link rel="shortcut icon" type="image/png" href="favicon.png" />
</head>

<body>
  <div class="container">
    <div class="head">
      <div class="logo">
        <img src="logo.png" width="100%" height="100%">
      </div>
      <div class="menu">
        <h3>Проекты</h3>
        <h3>Слайды</h3>
        <h3>Контакты</h3>
      </div>
    </div>
  </div>
</body>

</html>

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

.container .head .logo {
    position: relative;
    /* float: left; */
    height: 120px;
    width: 120px;
    display: inline-block;
}

.container .head .menu {
    position: relative;
    height: 120px;
    width: 60%;
    background: grey;
    display: inline-block;
    padding-left: 10px;
    margin-left: 10%;
}

.container .head .menu h3 {
    display: inline;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Страница 2</title>
        <link rel="stylesheet" type="text/css" href="page3.css">
        <link rel="shortcut icon" type="image/png" href="favicon.png"/>
    </head>
    <body>
        <div class="container">
            <div class="head">
                <div class="logo">
                    <img src="logo.png" width="100%" height="100%">
                </div>
                <div class="menu">
                    <h3>Проекты</h3>
                    <h3>Слайды</h3>
                    <h3>Контакты</h3>
                </div>
            </div>
        </div>
    </body>
</html>

Что это такое? Как решить данную проблему? Буду благодарен за любые конструктивные подсказки.

2 ответа 2

1
.container {
      display: flex;
      max-width: 100%;
    }

    .container .logo {
        height: 120px;
        width: 120px;
        border: 1px solid red;
        margin-right: 100px;
    }

    .container .logo img {
        max-width: 100%;
    }

    .container .menu {
        background: grey;
        padding: 10px;
        display: flex;
    }

    .container .menu h3 {
      margin: 0;
    }

    .container .menu h3:not(:last-child) {
      padding-right: 20px;
    }

<div class="container">
  <div class="logo">
    <img src="logo.png">
  </div>
  <div class="menu">
    <h3>Проекты</h3>
    <h3>Слайды</h3>
    <h3>Контакты</h3>
  </div>
</div>
3
0

Если раскомментировать строку в этом коде, то всё заработает как надо)

.container .head .logo {
    position: relative;
    /* float: left; */
    height: 120px;
    width: 120px;
    display: inline-block;
}

1
  • Спасибо, не доглядел, вы правы! 3 фев 2021 в 17:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.