Html 如何将文本放置在水平标尺上方？

我想将文本放置在规则上方和标题右侧，如下图底部所示

这是我的HTML：

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

标题
人物

（我目前没有“character”类的CSS，因为我没有任何可用的CSS。）

我尝试过对齐文本，使用CSS浮动或定位，我得到的最接近的结果是使文本与规则保持一致，但它在最后将其切断

---

有人能提供一些帮助吗？

您可以使用

浮动

来实现这一点，就像第一项是

浮动：左和第二项将是
浮动：右另一个解决方案是
显示：内联块显示：flex


.float{overflow:hidden；}
.浮动h2{
保证金：0；
浮动：左；
}
.float.category{float:right；}
伊尼布洛克先生{
溢出：隐藏；
字母间距：-4px；
}
.inineblock h2{
保证金：0；
宽度：50%；
字母间距：0；
显示：内联块；
垂直对齐：顶部；
}
.inineblock.类别{
宽度：50%；
字母间距：0；
文本对齐：右对齐；
显示：内联块；
垂直对齐：顶部；
}
.flexbox{
证明内容：之间的空间；
显示器：flex；
}
.flexbox h2{
保证金：0；
自对准：柔性端；
}
.flexbox.category{align self:flex end；}

标题
人物

标题
人物

标题
人物
尝试使用


.flex容器{
显示器：flex；
证明内容：之间的空间；
}
.柔性容器h2{
页边距底部：0；
自对准：柔性端；
}
.flex容器span.category{
自对准：柔性端；
字体：斜体；
字体大小：14px；
}

标题
人物
使用也可以使用此

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

看，这就是你要找的。请解释一下你的代码是如何解决这个问题的。这将有助于OP理解您的代码，也有助于未来的搜索者。请解释您的代码如何解决问题。这将有助于OP了解您的代码，也有助于未来的搜索者