如何在同一行中将文本与左边的文本和右边的文本对齐？

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>

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

Answer 2

HTML：

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

CSS：

.right{ 
    float:right; 
} 

.left{ 
    float:left; 
} 

d EMO：
http://jsfiddle.net/W3Pxv/1

Answer 3

HTML文件：

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

CSS文件：

.left 
{ 
    float: left; 
} 

.right 
{ 
    float: right; 
} 

和你做....

Answer 4

如果你只是想改变文本的对齐方式只是做一个类

.left { 
text-align: left; 
} 

和跨越阶级通过文字

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

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

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

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

Answer 8

添加跨度上每一个或一组词要对齐左或右。 然后在跨度添加ID或类如：

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

CSS-

#makeLeft{ 
float: left; 
} 

#makeRight{ 
float: right; 
}