将文本对齐到标题的顶部

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

在标题中添加display: inline-block和float:left

​

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

<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 2

如果我猜对了，请使用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不浮动文本，则需要从其中删除display: inline-block。

这个问题很不清楚:)

Answer 3

你的意思是你只想使用<sup>test</sup>。如果你想要特别的设计，你也可以设计它。

​

<div class="chronicles"><sup>2000th</sup> Lorem ipsum dolor sit amet.</div>

​