如何在同一行中將文本與左邊的文本和右邊的文本對齊？

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