texto - como se alinea a la derecha en html

Alinee a la derecha y alinee el texto a la izquierda en la misma celda de la tabla HTML

Question

Tengo una celda en una <table> HTML. Me gustaría que parte del contenido de la celda se justifique y parte se justifique a la derecha. es posible?

Answer 1

El estilo td no es necesario, pero hará que sea más fácil ver este ejemplo en el navegador

<table>
<tr>
<td style="border: 1px solid black; width: 200px;">
<div style="width: 50%; float: left; text-align: left;">left</div>
<div style="width: 50%; float: left; text-align: right;">right</div>
</td>
</tr>
</table>

Answer 2

Es posible, pero cómo depende de lo que estás tratando de lograr. Si es esto:

| Alineado a la izquierda alineado a la derecha | en una celda, entonces puedes usar divs flotantes dentro de la etiqueta td:

<td>
<div style=''float: left; text-align: left''>Left-aligned</div>
<div style=''float: right; text-align: right''>Right-aligned</div>
</td>

Si es | Alineado a la izquierda
Alineado a la derecha |

Entonces la solución de Balon es correcta.

Si es: | Alineado a la izquierda | Alineado a la derecha |

Entonces es:

<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>

Answer 3

La respuesta de Tor Valamo con una pequeña contribución de mi lado: use el atributo "nowrap" en el elemento "td", y puede eliminar la especificación de "ancho". Espero eso ayude.

<td nowrap>
<div style="float:left;">this is left</div>
<div style="float:right;">this is right</div>
</td>

Answer 4

Podría usar algo como:

<td>
<div style="float:left;width:49%;text-align:left;">this is left</div>
<div style="float:right;width:49%;text-align:right;">this is right</div>
</td>

El 49% es para dar un poco de espacio para que el renderizador ajuste las cosas.

Y puedes usar <div> o <span>

Answer 5

Quieres decir así?

<!-- ... --->
<td>
this text should be left justified
and this text should be right justified?
</td>
<!-- ... --->

En caso afirmativo

<!-- ... --->
<td>
<p style="text-align: left;">this text should be left justified</p>
<p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->

Answer 6

Se me ocurrió esto al tratar de descubrir cómo mostrar la moneda (''$'' a la izquierda, número a la derecha) en las celdas de la tabla:

<div class="currency">20.34</div>
.currency {
text-align: right;
width: 100%;
}
.currency:before {
content: "$";
float: left;
}

Answer 7

Si los quieres en líneas separadas, haz lo que dijo Balon. Si quieres que estén en la misma línea, hazlo:

<td>
<div style="float:left;width:50%;">this is left</div>
<div style="float:right;width:50%;">this is right</div>
</td>

Answer 8

seguro, pero debe envolver esos "bloques" en etiquetas separadas y aplicar la alineación a esos.