如何在同一行中将文本左对齐并将文本右对齐？

Question

如何对齐文本,使其中一些文本与左对齐,一些文本在同一行内对齐？

<p>This text should be left-aligned. This text should be right aligned.</p>

我可以将所有文本对齐到左侧(或右侧),直接内联,或使用样式表 -

<p style='text-align: left'>This text should be left-aligned. 
    This text should be right aligned.</p>

如何将相应的文本左对齐和右对齐,同时保持在同一行？

Answer 1

<p style="text-align:left;">
    This text is left aligned
    <span style="float:right;">
        This text is right aligned
    </span>
</p>

Answer 2

HTML:

<span class="right">Right aligned</span><span class="left">Left aligned</span>?

CSS:

.right{
    float:right;
}

.left{
    float:left;
}

目前是“最高”还是“最高票数”？两者都是可以改变的，所以您不会帮助任何将来的追随者：-)无论如何，当我像您一样开始使用所有样式的内联时，我很快意识到，将内容和呈现方式分开是有充分理由的。CSS并不可怕，周围有很多免费的教程-努力吧 (2认同)

Answer 3

如果您不想使用浮动元素并且想要确保两个块不重叠,请尝试:

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>

Answer 4

HTML文件:

<div class='left'> Left Aligned </div> 
<div class='right'> Right Aligned </div>

CSS文件:

.left
{
  float: left;
}

.right
{
  float: right;
}

你完成了......

Answer 5

<h1> left <span> right </span></h1>

CSS:

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}

Answer 6

虽然这里的几个解决方案都可行,但没有一个句柄可以很好地重叠,最终将一个项目移动到另一个项目之下.如果您正在尝试布局将动态绑定的数据,那么在运行时它将不会知道它看起来很糟糕.

我喜欢做的只是创建一个单行表并在第二个单元格上应用正确的浮点数.无需在第一个上应用左对齐,默认情况下会发生这种情况.这通过自动换行完美地处理重叠.

HTML

<table style="width: 100%;">
  <tr><td>Left aligned stuff</td>
      <td class="alignRight">Right aligned stuff</td></tr>
</table>

CSS

.alignRight {
  float: right;
}

Answer 7

使用 css flex layout 和 justify-content 的答案

p {
  display: flex;
  justify-content: space-between;
}

<p>
  <span>This text is left aligned</span>
  <span>This text is right aligned</span>
</p>