嵌套文本在HTML中对齐

这是因为你 .author DIV是100%宽度,因为它的父元素是块元素。

所以要解决这个包裹你的 .meta 另一个分区内的分区,即 .wrap 然后应用 text-align:right . 你还需要申请 display:inline-block 到 元 DIV,这样它只能获取其内容宽度,而不能 100% .

.wrap {
  text-align: right;
}

.meta {
  display: inline-block;
}

.author {
  text-align: left;
}

<div class="wrap">
  <div class="meta">
    Answered May 12 '20 at 14:32 <br />
    <div class="author">Person A</div>
  </div>
</div>

是的,简单的解决方法就是这样。

CSS

.meta {
    text-align: right;     
}
.title{
    display: inline-block;
    text-align: left;
}

HTML

<div class="meta">
    <div class="title">
     Answered May 12 '20 at 14:32 <br>
     <div class="author">Person A</div>
    </div>
</div>

祝你好运。

您也可以这样做:

.meta {
  position: absolute;
  right: 0;
  text-align: left;
}

<div class="meta">
  Answered May 12 '20 at 14:32 <br />
  <div class="author">Person A</div>
</div>

<div class="meta" style="float: right;">
    Answered May 12 '20 at 14:32
    <div class="author">Person A</div>
</div>
<div style="clear: both;"></div>

解1。使用Flex。

.meta {
  display: flex;
    justify-content: flex-end;
}

<div class="meta">
    <div class="title">
     Answered May 12 '20 at 14:32 <br>
     <div class="author">Person A</div>
    </div>
</div>

解2。将文本左对齐(默认),并添加左边距以使DIV右对齐。

.meta {
    margin-left: 75%;
}

<div class="meta">
     Answered May 12 '20 at 14:32 <br />
     <div class="author">Person A</div>
</div>

我想你可以这样做

<div align="right">

在此链接中搜索 https://www.w3schools.com/tags/att_p_align.asp

我想你可以这样做 <div align="right"> 这个链接中的searsh https://www.w3schools.com/tags/att_p_align.asp