css - 将文本对齐到标题的顶部

Question

我想将文本与标题的顶部对齐，例如 <h4>2004th</h4> ..

我的代码不起作用:

.chronicle {
  top: 0;
}
.chronicle h5,
.chronicle h4,
.chronicle h3,
.chronicle h2,
.chronicle h1 {
  margin: 0 10px 10px 0;
  padding: 0;
  display: inline-block;
}

<div class="chronicle">
  <h1>2003</h1>
  Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate
  officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum.
</div>

Answer 1

如果我没猜错，请使用 vertical-align:top 对齐您的 inline-block。

.chronicle {
  top: 0;
}
.chronicle h5,
.chronicle h4,
.chronicle h3,
.chronicle h2,
.chronicle h1 {
  margin: 0 10px 10px 0;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}

<div class="chronicle">
  <h1>2003</h1>
  Lorem ipsum dolor sit amet, consectetur adilorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate reiciendis, deserunt velit veniam quidem itaque dolore dolorum, culpa aliquam similique neque voluptatibus. Porro vitae soluta cupiditate
  officia sunt, ipsa aliquam! pisicing elit. Officiis quis, architecto praesentium. Repellat voluptatibus sint tenetur illum quos cumque dicta omnis quis impedit dolores, sit est placeat maxime. Est, earum.
</div>

或者，如果您的意思是将所有文本(如 sup)对齐到 h1 的顶部，则需要使用它

.chronicle {
  top: 0;
}
.chronicle h5,
.chronicle h4,
.chronicle h3,
.chronicle h2,
.chronicle h1 {
  margin: 0 10px 10px 0;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}

sup {
  font-size: 12px;
}

<div class="chronicle">
  <h1>2003 <sup> Lorem ipsum dolsit est placeat maxime. Est, earum.</sup></h1>
</div>

或者，如果您希望您的 h1 不是 float 文本，您需要从中删除 display: inline-block。

问题很不清楚:)