Jak mogę wyrównać tekst do lewej i do prawej w tym samym wierszu?

104

Jak mogę wyrównać tekst tak, aby część z niego była wyrównana do lewej, a część do prawej w tej samej linii?

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

Mogę wyrównać cały tekst do lewej (lub do prawej), bezpośrednio w wierszu 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 lewej i do prawej, zachowując go w tej samej linii?

html css

— Sababoni
źródło

172

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

Rozwiń fragment

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

— Giona
źródło

1

text-align:left;powinno float:left;wyglądać następująco: Lewy tekst Prawy tekst

— Shailendra Madda

37

HTML:

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

css:

.right{
    float:right;
}

.left{
    float:left;
}

Demo:
http://jsfiddle.net/W3Pxv/1

— Puyol
źródło

@mawg Choć może tak być, wolę najlepszą odpowiedź, ponieważ nie wymaga ona css.

— Menasheh

4

Obecnie „na topie” czy „najwięcej głosów”? Oba mogą się zmienić, więc nie pomagasz żadnym przyszłym myślicielom :-) W każdym razie, podczas gdy zacząłem tak jak ty, z całą stylizacją w jednej linii, szybko zdałem sobie sprawę, że są dobre powody, aby oddzielić treść od prezentacji. CSS nie jest przerażający i jest mnóstwo darmowych samouczków dookoła

— zrób

18

Jeśli nie chcesz używać elementów pływających i chcesz mieć pewność, że oba bloki nie nachodzą na siebie, 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>

— Jack Miller
źródło

To jedyna odpowiedź, która pozwala na użycie więcej niż tylko dwóch kolumn, czego potrzebowałem. Prawdopodobnie jest to bardziej szczegółowa kontrola, niż zależało OP.

— Kristen Hammack

9

PLIK HTML:

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

PLIK CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

i gotowe ....

— Osama Yawar Khawaja
źródło

To jest stare, ale musisz otoczyć 2 DIV innym tagiem, takim jak DIV, albo nie działa.

— Panama Jack

7

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

css:

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

— Web Designer cum Promotor
źródło

7

Chociaż kilka z tych rozwiązań zadziała, żaden z uchwytów nie nakłada się dobrze i nie przenosi jednego elementu pod drugi. Jeśli próbujesz ułożyć dane, które będą dynamicznie wiązane, do czasu uruchomienia nie będziesz wiedział, że wyglądają źle.

Lubię po prostu tworzyć tabelę z jednym wierszem i stosować odpowiednią liczbę zmiennoprzecinkową w drugiej komórce. Nie ma potrzeby stosowania wyrównania do lewej na pierwszym, dzieje się to domyślnie. Te uchwyty doskonale zachodzą na siebie dzięki zawijaniu 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/

— Eric Soyke
źródło

Jest to dla mnie prawie złote, ale czy masz pomysł, dlaczego użycie właściwości tabeli CSS powoduje, że dwie komórki są poza linią w poziomie? jsfiddle.net/7wddxks5/7 Nie mogę tego obejść.

— addMitt

1

Właściwie dla mnie, ponieważ chcę, aby właściwy tekst był wyrównany do prawej, wydaje się to działać idealnie, jeśli po prostu przypiszę tekst wyrównanie: do prawej i pozbędę się pływaka.

— addMitt

Nie mogłem też zrozumieć, dlaczego powoduje pionowe przesunięcie. Ale udało mi się to naprawić za pomocą wyrównania w pionie. Przyciągnęliśmy także style do klas, aby trochę wyczyścić HTML. jsfiddle.net/o10ogqkd

— Eric Soyke

jest to tutaj eleganckie rozwiązanie. Myślę, że powinna to być akceptowana odpowiedź, ponieważ wykorzystuje więcej kreatywności w używaniu tagu tabeli

— Rotimi

3

Dodaj zakres do każdego lub grupy słów, które chcesz wyrównać do lewej lub prawej. następnie dodaj identyfikator lub klasę w zakresie, na przykład:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

— Urvashi Gupta
źródło

3

Zgodnie ze specyfikacją HTML, Twój przykład powinien używać klasy, a nie identyfikatora.

— Sergio,

0

Jeśli używasz Bootstrap, spróbuj tego:

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

— Adrian Chrostowski
źródło

-1

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

.left {
text-align: left;
}

i przeciągnij tę klasę przez tekst

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

— bntrns
źródło

3

To połowa odpowiedzi na pytanie o wielokrotne wyrównanie na linię.

— TimZaman