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

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

This text should be left-aligned. This text should be right aligned.

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

 

This text should be left-aligned. This text should be right aligned.

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

 

This text is left aligned This text is right aligned

HTML:

 Right alignedLeft aligned 

css:

 .right{ float:right; } .left{ float:left; } 

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

Si no desea usar elementos flotantes y desea asegurarse de que ninguno de los dos bloques se superponga, intente:

 

LEFT

RIGHT

ARCHIVO HTML:

 
Left Aligned
Right Aligned

ARCHIVO CSS:

 .left { float: left; } .right { float: right; } 

y has terminado …

 

left right

css:

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

Si bien varias de las soluciones aquí funcionarán, ninguna se superpone bien y termina moviendo un elemento por debajo del otro. Si está tratando de distribuir 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 sola tabla de filas y aplicar el flotador derecho en la segunda celda. No es necesario aplicar un alineamiento a la izquierda en el primero, eso sucede de forma predeterminada. Esto maneja la superposición perfectamente mediante el ajuste de palabras.

HTML

 
Left aligned stuff Right aligned stuff

CSS

 .alignRight { float: right; } 

https://jsfiddle.net/esoyke/7wddxks5/

Agregue span en cada grupo o grupo de palabras que quiera alinear a la izquierda o a la derecha. a continuación, agregue ID o clase en el lapso, como:

 

Left Text Right Text

CSS-

 #makeLeft{ float: left; } #makeRight{ float: right; } 

Si solo quieres cambiar la alineación del texto simplemente haz una clase

 .left { text-align: left; } 

y amplía esa clase a través del texto

 aligned left