Jak mogę wyrównać tekst w lewo i tekst w prawo w tym samym wierszu?

Question

Jak mogę wyrównać tekst tak, aby jego część była wyrównana do lewej, a część zrównała się w prawo w obrębie tej samej linii?

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

mogę wyrównać cały tekst w lewo (lub w prawo), albo bezpośrednio inline lub za pomocą arkusza stylów -

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

Jak mogę wyrównać odpowiedni tekst do w lewo i w prawo, trzymając go na tej samej linii?

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

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

CSS FILE:

.left 
{ 
    float: left; 
} 

.right 
{ 
    float: right; 
} 

i gotowe ....

Answer 4

Jeśli chcesz tylko zmienić wyrównanie tekstu po prostu utwórz klasy

.left { 
text-align: left; 
} 

i rozciągać tej klasy w tekście

<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

Jeśli nie chcesz korzystać z elementów pływających i chcesz się upewnić, że oba bloki nie pokrywają się, spróbuj:

<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

Podczas gdy kilka rozwiązań tutaj będzie działać, żadna klamka nie będzie się dobrze pokrywała i kończy się przenoszeniem jednego elementu na drugi. Jeśli próbujesz układać dane, które będą dynamicznie powiązane, nie będziesz wiedzieć, aż do czasu wykonania, że ​​wygląda źle.

Co lubię robić, to po prostu utworzyć tabelę z jednym wierszem i zastosować prawy ruch w drugiej komórce. Nie ma potrzeby stosowania lewostronnego na pierwszym, co dzieje się domyślnie. To obsługuje nakładanie się doskonale przez zawijanie słów.

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

Dodaj rozpiętości na każdej lub grupy słów, które chcesz wyrównać lewo lub w prawo. następnie dodać ID lub klasę o rozpiętości takich jak:

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

CSS-

#makeLeft{ 
float: left; 
} 

#makeRight{ 
float: right; 
}