如何将文本放置在水平线上方？

Question

我可以翻译此内容。以下是您需要翻译的内容：

我想将文本定位到规则上方，同时在标题右侧，如下图底部所示。

这是我的HTML代码：

  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
  <hr>

目前我没有为“character”类编写CSS，因为我还没有让任何东西正常工作。

我尝试过使用CSS来对齐文本，浮动或定位，最接近的效果是将其与规则放在一起，但它在末尾被截断了。

有人能提供帮助吗？

- StarDart

---

请查看 https://jsfiddle.net/8zaccx77/。 - user2417483

这就是您要找的内容：https://dev59.com/M2865IYBdhLWcg3wA5yc - Maki

Answer 1

尝试使用flexbox进行布局。

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-container h2 {
  margin-bottom: 0;
  align-self: flex-end;
}
.flex-container span.category {
  align-self: flex-end;
  font-style: italic;
  font-size: 14px;
}

<div class="flex-container">
  <h2>Heading</h2>
  <span class="category">Characters</span>
</div>
<hr>

- Ferrmolina

Answer 2

你也可以使用这个

.category
{
        position: absolute;
        right: 0px; 
}
h2
{
         position:absolute
         left:0px;
}

- Gomzy

---

请提供您的代码如何解决问题的说明。这将有助于原帖作者理解您的代码，也有助于未来的搜索者。 - SnareChops

Answer 3

您可以使用浮动来实现这一点，例如第一个项目将是float: left;，第二个项目将是float: right;，另一种解决方案是display: inline-block;，您还可以使用display:flex;

.float{overflow: hidden;}
.float h2{
  margin: 0;
  float: left;
}
.float .category{float: right;}


.inineblock{
  overflow: hidden;
  letter-spacing: -4px;
}
.inineblock h2{
  margin: 0;
  width: 50%;
  letter-spacing: 0;
  display:inline-block;
  vertical-align: top;
}
.inineblock .category{
  width: 50%;
  letter-spacing: 0;
  text-align: right;
  display:inline-block;
  vertical-align: top;
}

.flexbox{
  justify-content: space-between;
  display: flex;
}
.flexbox h2{
  margin: 0;
  align-self: flex-end;
}
.flexbox .category{align-self: flex-end;}

<div class="float">
  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="inineblock">
  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="flexbox">
  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
</div>
<hr>

.float{overflow: hidden;}
.float h2{
  margin: 0;
  float: left;
}
.float .category{float: right;}


.inineblock{
  overflow: hidden;
  letter-spacing: -4px;
}
.inineblock h2{
  margin: 0;
  width: 50%;
  letter-spacing: 0;
  display:inline-block;
  vertical-align: top;
}
.inineblock .category{
  width: 50%;
  letter-spacing: 0;
  text-align: right;
  display:inline-block;
  vertical-align: top;
}

.flexbox{
  justify-content: space-between;
  display: flex;
}
.flexbox h2{
  margin: 0;
  align-self: flex-end;
}
.flexbox .category{align-self: flex-end;}

<div class="float">
  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="inineblock">
  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="flexbox">
  <h2>Heading</h2>
  <div class="category"><em>Characters</em></div>
</div>
<hr>

- Adnan Akram

---

请提供您的代码如何解决问题的说明。这将有助于原帖作者理解您的代码，也有助于未来的搜索者。 - Box Box Box Box