Question

我希望将文字与<h4>2004th</h4>等标题的顶部对齐。

我的代码不起作用：

＆＃13;

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

＆＃13;

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

＆＃13;

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不是浮动文字，则需要从中移除display: inline-block。

问题非常不明确：）

Answer 2

将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 3

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

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

Answer 4

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

<div class="chronicle">
  <h1>2003</h1>
 <span class="title-text"> 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.</span>
</div>

Answer 5

您可以这样做：

.chronicle h5,
.chronicle h4,
.chronicle h3,
.chronicle h2,
.chronicle h1 {
  margin: 0 0px 10px 0;
  padding: 0;
}
.chronicle > h1 {
  display: inline-block;
}
.chronicle > span {
 font-size: 20px;
    display: inline-block;
    vertical-align: bottom;
    line-height: 50px;
}

<div class="chronicle">
  <h1>2003</h1><span>th</span>
  <p>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.</p>
</div>

将文本对齐到标题的顶部

5 个答案: