如何在同一行中将文本左对齐和右对齐？答案

【问题标题】：How may I align text to the left and text to the right in the same line?如何在同一行中将文本左对齐和右对齐？
【发布时间】：2023-03-31 07:43:02
【问题描述】：

如何对齐文本，以便在同一行内，其中一些向左对齐，而另一些向右对齐？

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

https://jsfiddle.net/gionaf/5z3ec48r/

【讨论】：

text-align:left; 应该是 float:left; 就像
左文本右文字

【解决方案2】：

HTML：

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

css：

.right{
    float:right;
}

.left{
    float:left;
}

演示：
http://jsfiddle.net/W3Pxv/1

【讨论】：

@mawg 虽然可能是这样，但我更喜欢最佳答案，因为它不需要 css。
目前“最高”还是“最多票”？这两者都可以改变，所以你不会帮助任何未来的读者 :-) 无论如何，虽然我开始喜欢你，所有样式都内联，但我很快意识到有很好的理由将内容和演示分开。 CSS 并不可怕，周围有很多免费教程 - 去吧

【解决方案3】：

HTML 文件：

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

CSS 文件：

.left
{
  float: left;
}

.right
{
  float: right;
}

你已经完成了......

【讨论】：

这是旧的，但你必须用另一个标签（如 DIV）包围 2 个 DIV，否则它不起作用。

【解决方案4】：

如果您只想更改文本的对齐方式，只需创建一个类

.left {
text-align: left;
}

并通过文本跨越该类

<span class='left'>aligned left</span>

【讨论】：

这是每行多重对齐问题的答案的一半。

【解决方案5】：

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

css:

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

【讨论】：

【解决方案6】：

如果您不想使用浮动元素并想确保两个块不重叠，请尝试：

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

【讨论】：

这是唯一允许您使用多于两列的答案，这正是我所需要的。不过，这可能比 OP 关心的更精细。

【解决方案7】：

虽然这里的几个解决方案都行得通，但没有一个解决方案可以很好地重叠并最终将一个项目移动到另一个项目的下方。如果您尝试对将动态绑定的数据进行布局，您直到运行时才会知道它看起来很糟糕。

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

HTML

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

CSS

.alignRight {
  float: right;
}

https://jsfiddle.net/esoyke/7wddxks5/

【讨论】：

这对我来说接近黄金，但知道为什么使用 CSS 表格属性会使两个单元格在水平方向上不一致吗？ jsfiddle.net/7wddxks5/7我似乎无法绕过它。
实际上，对我来说，因为我希望正确的文本向右对齐，如果我简单地分配 text-align: right 并摆脱浮动，这似乎可以完美地工作。
我也无法弄清楚为什么它会导致垂直移动。但我能够用垂直对齐来修复它。还将样式拉入类以稍微清理 HTML。 jsfiddle.net/o10ogqkd
这是一个优雅的解决方案。我认为这应该是公认的答案，因为它在使用表格标签时采用了更多的创造力

【解决方案8】：

在要左对齐或右对齐的每个或一组单词上添加跨度。然后在 span 上添加 id 或 class 例如：

<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

【讨论】：

根据 html 规范，您的示例应该使用类而不是 ID。

【解决方案9】：

如果你使用的是 Bootstrap，试试这个：

<div class="row">
    <div class="col" style="text-align:left">left align</div>
    <div class="col" style="text-align:right">right align</div>
</div>

【讨论】：

【解决方案10】：

使用 css flex 布局和 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>

【讨论】：

谢谢！我希望会有一个 flex-box 解决方案，但不是那么简洁！