Мой заголовок включен как часть моего основного тега - PullRequest
Новая
       24

Мой заголовок включен как часть моего основного тега

1 голос
/ 27 сентября 2019

Когда я применяю поля к своему основному тегу, пытаясь разместить его под заголовком, он перемещает всю страницу вниз, а не только основной раздел.Почему основной раздел не отображается под заголовком?

Я пытался использовать div, а также семантические теги HTML. 

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #222;
}

header {
  text-align: center;
  width: 100%;
}

header h1 {
  float: left;
}

nav {
  margin: 25px 25px;
  float: left;
}

nav ul {
  margin: -17px 0 0 15px;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  padding: 5px;
}

nav ul li a {
  text-decoration: none;
}

.nav-button {
  float: right;
  margin-top: 10px;
  margin-right: 5px;
}

.nav-button a {
  color: #fff;
  text-decoration: none;
}

main {
  margin-top: 20px;
}

.container {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.banner {
  margin-top: 50px;
}
<body>
  <header>
    <h1>Website Title</h1>
    <nav>
      <ul>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
        <li class="navbar-item"><a href="#">Nav Item</a></li>
      </ul>
    </nav>
    <button class="button-primary nav-button"><a href="#">Button</a></button>
  </header>
  <main>
    <div class="container">
      <div class="banner">
        <h1>Welcome to A Website</h1>
        <p>Simple subheading</p>
      </div>
    </div>
  </main>
</body>

Я ожидаю, что основной раздел, например, баннер, содержащий <h1>Welcome to A Website</h1> и <p>Simple subheading</p>

, будет отображаться под заголовком разделаэто показано в центре h1 / nav и кнопки.Применение поля к баннеру или контейнеру приводит к смещению всей страницы, включая заголовок.

1 Ответ

0 голосов
/ 27 сентября 2019

Причина в том, что элементы внутри тегов заголовка больше, чем его контейнер.

Итак, вы можете попробовать следующие варианты:

Попробуйте 1:

Дайте вашему header определенную высоту, чтобы main div мог опуститься ниже него: 

header
{
 height: 110px ; /* Approx */
}

Попробуйте 2:

Добавьте margin-top к тегу main 

 main
{
 margin-top: 7% ; /* Approx */
}

Это может дать ожидаемый результат.

...