¿Cómo puedo alinear el texto a la izquierda y el texto a la derecha en la misma línea?

102

¿Cómo puedo alinear el texto para que parte de él se alinee a la izquierda y parte de él se alinee a la derecha dentro de la misma línea?

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

Puedo alinear todo el texto a la izquierda (oa la derecha), ya sea directamente en línea o usando una hoja de estilo -

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

¿Cómo puedo alinear el texto correspondiente a la izquierda y a la derecha, manteniéndolo en la misma línea?

html css

— Sababoni
fuente

164

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

Expandir fragmento

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

— Giona
fuente

1

text-align:left;debería ser float:left;como Texto a la izquierda Texto a la derecha

— Shylendra Madda

34

HTML:

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

css:

.right{
    float:right;
}

.left{
    float:left;
}

Demostración:
http://jsfiddle.net/W3Pxv/1

— Puyol
fuente

@mawg Aunque podría ser, prefiero la respuesta principal porque no requiere css.

— Menasheh

4

¿Actualmente "en la parte superior" o "con más votos"? Ambos pueden cambiar, por lo que no estás ayudando a futuros lectores :-) De todos modos, mientras comencé como tú, con todos los estilos en línea, pronto me di cuenta de que hay buenas razones para separar contenido y presentación. CSS no da miedo y hay muchos tutoriales gratuitos alrededor - adelante

— Mawg dice reinstalar a Monica

18

Si no desea utilizar elementos flotantes y desea asegurarse de que ambos bloques no se superpongan, intente:

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

Esta es la única respuesta que le permite usar más de dos columnas, que era lo que necesitaba. Sin embargo, probablemente sea un control más granular de lo que le importaba al OP.

— Kristen Hammack

9

ARCHIVO HTML:

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

ARCHIVO CSS:

.left
{
  float: left;
}

.right
{
  float: right;
}

y ya está ...

— Osama Yawar Khawaja
fuente

7

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

css:

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

— Diseñador web cum Promotor
fuente

7

Si bien varias de las soluciones aquí funcionarán, ninguna maneja bien la superposición y termina moviendo un elemento debajo del otro. Si está intentando diseñar datos que se vincularán dinámicamente, no sabrá hasta el tiempo de ejecución que se ve mal.

Lo que me gusta hacer es simplemente crear una tabla de una sola fila y aplicar el flotador correcto en la segunda celda. No es necesario aplicar una alineación a la izquierda en el primero, eso sucede de forma predeterminada. Esto maneja la superposición perfectamente mediante el ajuste de palabras.

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
fuente

Esto es casi dorado para mí, pero ¿alguna idea de por qué el uso de las propiedades de la tabla CSS hace que las dos celdas estén fuera de línea horizontalmente? jsfiddle.net/7wddxks5/7 Parece que no puedo evitarlo .

— addMitt

1

En realidad, para mí, dado que quiero que el texto correcto esté alineado a la derecha, esto parece funcionar perfectamente si simplemente asigno text-align: right y me deshago del flotador.

— addMitt

Tampoco pude entender por qué estaba causando el desplazamiento vertical. Pero pude arreglarlo con alineación vertical. También introdujo los estilos en clases para limpiar un poco el HTML. jsfiddle.net/o10ogqkd

— Eric Soyke

esta es una solución elegante aquí. Creo que debería ser la respuesta aceptada, ya que emplea más creatividad en el uso de la etiqueta de la tabla

— Rotimi

3

Agregue espacio en cada palabra o grupo de palabras que desee alinear a la izquierda oa la derecha. luego agregue id o clase en el intervalo como:

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

CSS-

#makeLeft{
float: left;
}

#makeRight{
float: right;
}

— Urvashi Gupta
fuente

2

Según la especificación html, su ejemplo debe usar una clase y no una ID.

— Sergio

0

Si está utilizando Bootstrap, intente esto:

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

-1

Si solo desea cambiar la alineación del texto, simplemente haga clases

.left {
text-align: left;
}

y abarcar esa clase a través del texto

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

— bntrns
fuente

3

Esta es la mitad de la respuesta a la pregunta de múltiples alineaciones por línea.

— TimZaman