Header 越界

Question

我有一个 link，它在我的 header 下面。我试过 float:top（我什至不认为那是真的）

.header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
}

<div class="header">
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>
</div>

Answer 1

如果您想让 link 仍然固定在顶部，请使用 position: fixed;

.header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%
  padding-top: 10px;
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
  position: fixed;
  top: 10px;
  right: 10px;
}

<div class="header">
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>
</div>

Answer 2

header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
}

  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>

Header 越界

Header out of line

html

css

alignment