Aynı satırda metni sola ve sağa nasıl hizalayabilirim?

104

Metni bir kısmı sola, bir kısmı da aynı satır içinde sağa hizalanacak şekilde nasıl hizalayabilirim?

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

Tüm metni sola (veya sağa), doğrudan satır içi olarak veya bir stil sayfası kullanarak hizalayabilirim -

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

Aynı satırda tutarken ilgili metni sola ve sağa nasıl hizalayabilirim?

html css

— Sababoni
kaynak

173

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

Snippet'i genişlet

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

— Giona
kaynak

1

text-align:left;şu şekilde olmalıdır: float:left; Left text Sağ Metin

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

@mawg Olsa da en iyi cevabı tercih ediyorum çünkü css gerektirmiyor.

— Menasheh

4

Şu anda "üstte" mi yoksa "en çok oy mu"? Her ikisi de değişebilir, bu yüzden gelecekteki hiçbir şeye yardım etmiyorsunuz :-) Her neyse, tüm stilleri sıralı olarak sizin gibi başladığımda, içerik ve sunumu ayırmak için iyi nedenler olduğunu kısa sürede fark ettim. CSS korkutucu değil ve etrafta pek çok ücretsiz eğitim var - bunun için gidin

— Mawg,

18

Yüzen öğeleri kullanmak istemiyor ve her iki bloğun da çakışmadığından emin olmak istiyorsanız, şunu deneyin:

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

İki sütundan fazlasını kullanmanıza izin veren tek cevap bu, ihtiyacım olan buydu. Muhtemelen OP'nin umursadığından daha ayrıntılı bir kontrol.

— Kristen Hammack

9

HTML DOSYASI:

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

CSS DOSYASI:

.left
{
  float: left;
}

.right
{
  float: right;
}

ve bitirdiniz ....

— Usame Yawar Khawaja
kaynak

Bu eski ama 2 DIV'yi bir DIV gibi başka bir etiketle çevrelemelisiniz, yoksa işe yaramaz.

— 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 Promoter
kaynak

7

Buradaki çözümlerin birçoğu işe yarayacak olsa da, hiçbiri üst üste binmeyi iyi bir şekilde ele almaz ve bir öğeyi diğerinin altına taşımaz. Dinamik olarak bağlanacak verileri düzenlemeye çalışıyorsanız, çalışma zamanına kadar kötü göründüğünü bilemezsiniz.

Yapmaktan hoşlandığım şey, tek satırlık bir tablo oluşturmak ve ikinci hücreye doğru kayan noktayı uygulamak. Birincisine sola hizalamaya gerek yoktur, bu varsayılan olarak gerçekleşir. Bu üst üste binmeyi kelime kaydırarak mükemmel şekilde ele alır.

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
kaynak

Bu benim için altına yakın, ancak CSS tablosu özelliklerini kullanmanın neden iki hücreyi yatay olarak çizginin dışına çıkardığına dair bir fikriniz var mı? jsfiddle.net/7wddxks5/7 Bunun üstesinden gelemiyorum .

— addMitt

1

Aslında, benim için, doğru metnin sağa hizalanmasını istediğimden, basitçe text-align: right ve kayan noktadan kurtulun atarsam bu mükemmel çalışıyor gibi görünüyor.

— addMitt

Dikey kaymaya neden neden olduğunu da anlayamadım. Ama dikey hizalama ile düzeltmeyi başardım. Ayrıca HTML'yi biraz temizlemek için stilleri sınıflara çekti. jsfiddle.net/o10ogqkd

— Eric Soyke

bu, burada zarif bir çözümdür. Ben masa etiketini kullanarak daha yaratıcılık istihdam gibi kabul cevap olması gerektiğini düşünüyorum

— Rotimi

3

Sola veya sağa hizalamak istediğiniz her kelime veya kelime grubuna aralık ekleyin. ardından aralıkta aşağıdaki gibi id veya sınıf ekleyin:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

— Urvashi Gupta
kaynak

3

Html spesifikasyonuna göre, örneğiniz bir kimlik değil bir sınıf kullanmalıdır.

— Sergio

0

Bootstrap kullanıyorsanız şunu deneyin:

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

-1

Yalnızca metnin hizalamasını değiştirmek istiyorsanız, sadece bir sınıf oluşturun

.left {
text-align: left;
}

ve bu sınıfa metin boyunca

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

— bntrns
kaynak

3

Bu, çizgi başına çoklu hizalama sorusunun cevabının yarısıdır.

— TimZaman