Элемент NavBar h1 застрял сверху - PullRequest
Новая
       12

Элемент NavBar h1 застрял сверху

0 голосов
/ 03 марта 2019

Я хочу, чтобы у моей навигационной панели были элементы h1 и li, чтобы они прилипали к нижней части.Мой элемент h1 прилипает к вершине, когда я хочу, чтобы он был внизу, как мои элементы li.Я вставил изображение внизу вместе с кодом.

Как выглядит панель навигации 

body{
  margin:0;
  padding:0;
  display:block;
  background-color:#abb2bc;
}



.container{


}

#Home{
  font-size:20px;
  display: inline;
  text-align:center;
  
}

main ::after{
  content:"";
  display:table;
  clear:both;
}

.nav{
  background-color: #363b42;
  font-family: 'Roboto Slab',serif;


}

.nav a:hover{
  color:#29703f;
  text-decoration: overline;
  font-size:22px;
}


.nav a{
  text-decoration: none;
  color:black;
  font-size: 20px;
  text-transform: uppercase;

}

.nav ul{
  margin:0;
  list-style: none;
  float: right;
  display: inline;
  padding:0px;

}

header ::after {
  content:"";
  display:table;
  clear:both;
}

.nav li{
  display: inline-block;
  margin-left: 75px;
  padding-right: 25px;
  padding-top: 30px;
  text-align:center;

}

.nav h1{
  float:left;

}
<!DOCTYPE html>
<html>

<head>
  <title>Fortnite Tips</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-- Navigation bar -->
  <header class="container">
    <div class="nav">
      <a><h1 id="Home">GamingCoachBlog</h1></a>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact<a /></li>
      </ul>
    </div>
  </header>
</body>

Если бы вы могли объяснить, почему это не работает, я был бы признателен.Я застрял на этом некоторое время, так как я все еще учусь делать адаптивные сайты.

Ответы [ 2 ]

0 голосов
/ 03 марта 2019

Две проблемы

  1. Пробел между header ::after применяет стиль после каждого дочернего элемента заголовка.

  2. Вы должны исправить .nav, а не заголовок.

Так что сделайте это: 

.nav::after {
    content: "";
    display: table;
    clear: both;
}
0 голосов
/ 03 марта 2019

Попробуйте сделать <h1> внутри <ul>, как показано ниже: 

<ul>
  <li><a><h1 id="Home">GamingCoachBlog</h1></a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact<a /></li>
</ul>

и удалите это правило в вашем css float:left;

...