如何将文本放在水平规则之上？

Question

我想将文字放在规则上方和标题的右侧，如下图所示。

这是我的HTML：

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

（我目前没有“角色”类的CSS，因为我没有任何工作。）

我已经尝试对齐文本，使用CSS浮动或定位，而我得到的最接近的是符合规则，但最后会将其删除。

有人可以提供一些帮助吗？

Answer 1

尝试使用flexbox

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

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

Answer 2

您可以使用floating来实现第一项float: left;，第二项float: right;，其他解决方案将display: inline-block;，您也可以使用display:flex;

＆＃13;

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用也可以使用此

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