Question

我正尝试将这个h1推到我的导航标签下方。我的结构方式是在标题标签中有标题标签，在标题标签中有一个容器标签，在容器标签中是h1标签，在h1标签之后有一个nav标签，其中nav标签位于ul内，li位于里面ul。

.container {
  width: 50%;
  margin: auto;
}


/* Header */

header {
  height: 100vh;
}

header h1 {}


/* An unordered list is basically an array of items*/

ul {
  list-style-type: none;
  float: right;
  /* Top bottom right left*/
  /* Margin-top pushes it down.*/
}


/* List item specifies how it should be aka 1 item of the array */

li {
  display: inline-block;
  /* Top bottom right left*/
}


/* A means all the links */

a {
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  padding: 5px 20px;
  /* Seperates them*/
  border: 1px solid transparent;
}

<div class="container">
  <h1>Random Number Generator</h1>
  <nav>
    <ul>
      <li class="active"><a href="#Home">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
  </nav>
</div>

Answer 1

在h1下方添加nav

 <div class="container"> 
   <nav> 
      <ul> 
         <li class="active"><a href="#Home">Home</a></li> 
         <li><a href="#About">About</a></li> 
         <li><a href="#Contact">Contact</a></li> 
       </ul> 
   </nav> 
   <h1>Random Number Generator</h1>
 </div>

Answer 2

将<h1>标记移至<nav>元素下方，会将标头元素移至DOM（文档对象模型）中导航元素下方。

.container {
  width: 50%;
  margin: auto;
}


/* Header */

header {
  height: 100vh;
}

header h1 {}


/* An unordered list is basically an array of items*/

ul {
  list-style-type: none;
  float: right;
  /* Top bottom right left*/
  /* Margin-top pushes it down.*/
}


/* List item specifies how it should be aka 1 item of the array */

li {
  display: inline-block;
  /* Top bottom right left*/
}


/* A means all the links */

a {
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  padding: 5px 20px;
  /* Seperates them*/
  border: 1px solid transparent;
}

<div class="container">
  <nav>
    <ul>
      <li class="active"><a href="#Home">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
  </nav>
  <h1>Random Number Generator</h1>
</div>

如何下推h1标签或如何设置h1标签的位置，使其显示在我的导航栏下方

2 个答案: