CSS：左对齐和右对齐文本在同一行

Question

Stack Overflow 有问题询问如何在 1 行上同时左对齐和右对齐文本。我找不到适用于多行文本的答案。

如何在环绕多行的文本段落中将内联元素右对齐到它自己的一行？当内联元素在一行的中间时，它应该按其方式跳过文本并位于当前行的末尾。

示例代码：

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    <span class="lil-green"></span>
    elit. Pellentesque in vestibulum purus, et pharetra tellus. Etiam et ague tortor.
    <span class="lil-red"></span>
</p>

Simple Mockup

即使调整了文本容器元素的大小时，该解决方案也应该有效。

Answer 1

这正是 float 属性的用途。在该元素的规则内使用 float: right。您可以在 MDN's article

了解有关 float 属性的更多信息

right

The element must float on the right side of its containing block.

浮动使文本环绕图像或其他元素。

CSS：左对齐和右对齐文本在同一行

CSS: Left-align and right-align text on the same line

html

css

text

alignment

text-alignment