Question

我有一些文字。我希望最后一个右对齐，以便文本形成一个很好的列。

这是我想要达到的目标：

Once upon a midnight dreary, while I pondered, weak and weary,
Over many a quaint and curious volume of forgotten lore,
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door.
"'T is some visiter," I muttered, "tapping at my chamber door—
                                 Only this, and nothing more."

我可以告诉最后一行：“将你自己对准你上面文本的右边缘”吗？

我真的不想手动给文本宽度（即使在em s），因为如果用户调整大小或更改字体，我不希望这些行中断。

Answer 1

float包含段落的元素，float: left内容和float: right最后一行。浮动容器将与整个段落一样宽，因此右浮动最后一行将使其右边缘与前一文本的右边缘对齐。

示例：

<div style="float: left">
<span style="float: left">
Once upon a midnight dreary, while I pondered, weak and weary,<br/>
Over many a quaint and curious volume of forgotten lore,<br/>
While I nodded, nearly napping, suddenly there came a tapping,<br/>
As of some one gently rapping, rapping at my chamber door.<br/>
"'T is some visiter," I muttered, "tapping at my chamber door—<br/>
</span>
<span style="float: right; clear: left">Only this, and nothing more."</span>
</div>

如果您需要将整个事物集中在其父容器中，您可以将最顶层设置为text-align: center并使用display: inline-block作为文本容器。如果您使用此方法，我认为您不需要浮动它：

<div style="text-align: center">
<div style="display: inline-block; text-align: left">
<span style="float: left">
Once upon a midnight dreary, while I pondered, weak and weary,<br/>
Over many a quaint and curious volume of forgotten lore,<br/>
While I nodded, nearly napping, suddenly there came a tapping,<br/>
As of some one gently rapping, rapping at my chamber door.<br/>
"'T is some visiter," I muttered, "tapping at my chamber door—<br/>
</span>
<span style="float: right; clear: both">Only this, and nothing more."</span>
</div>
</div>

右对齐一些文本到上面文本的右边缘？

1 个答案: