标题超出行数

Question

我有一个链接，它位于我的标题下方。我尝试过 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

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>

Answer 2

如果您想让链接仍然固定在顶部，请使用 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>