124

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

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

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

4

10 回答 10

216 

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

于 2012-09-15T14:50:37.070 回答
42

​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

于 2012-09-15T14:53:11.980 回答
22

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

<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%;  display: inline-block;">RIGHT</p>
于 2015-10-05T10:58:09.740 回答
11

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

于 2020-12-16T12:12:47.790 回答
9

文件：

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

CSS文件：

.left
{
  float: left;
}

.right
{
  float: right;
}

你完成了....

于 2012-09-15T15:05:45.793 回答
8

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

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

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/

于 2016-02-16T19:06:53.203 回答
7 
<h1> left <span> right </span></h1>

CSS：

h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}
于 2012-09-15T16:08:23.253 回答
3

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

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}
于 2016-11-06T21:04:12.657 回答
0

如果您使用的是 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>
于 2020-03-19T19:23:13.377 回答
-1

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

.left {
text-align: left;
}

并通过文本跨越该类

<span class='left'>aligned left</span>
于 2012-09-15T15:42:09.407 回答