Tengo una celda en HTML <table>. Me gustaría que parte del contenido de la celda se justifique y parte se justifique a la derecha. es posible?Alinear a la derecha y alinear el texto a la izquierda en la misma celda de la tabla HTML
Si los quieres en líneas separadas hacer lo que dijo Balon. Si los quieres en las mismas líneas, hacer:
<td>
<div style="float:left;width:50%;">this is left</div>
<div style="float:right;width:50%;">this is right</div>
</td>
¿Por qué o por qué usaría un flotador aquí cuando simplemente puede usar 'text-align' en el mismo elemento en su lugar? – prodigitalson
esto todavía mantiene el texto en el div alineado a la derecha alineado a la izquierda – LukeP
seguro, pero debe envolver esos "bloques" en etiquetas separadas y aplicar la alineación a los mismos.
¿qué etiqueta usaría para esos bloques? – Brian
un div o una p dependiendo. Id probablemente lo mantenga bloqueado aunque la diferencia de clave entre su div p es que div es arbitrario y realmente no tiene un estilo predeterminado donde ap semánticamente significa un párrafo y tiene márgenes predeterminados y lo que no está definido por las reglas internas de CSS del navegador (a menos que lo hayas restablecido, lo cual es una buena práctica). – prodigitalson
¿Te refieres a esto?
<!-- ... --->
<td>
this text should be left justified
and this text should be right justified?
</td>
<!-- ... --->
Si es así
<!-- ... --->
<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>
<!-- ... --->
Creo que esto es lo que quiere el OP. Supongo que necesita una solución en la que las dos cadenas se coloquen una al lado de la otra: "en la misma línea". –
Puede que tengas razón. No estaba seguro de lo que exactamente preguntó. Por. De todos modos, dejaré mi comentario, ya que puede ser útil para alguien. – kjagiello
td style no es necesaria, pero hará que sea más fácil de 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>
Se podría utilizar 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 cabida al renderizador.
Y puede utilizar cualquiera <div> o <span>
Si usa un tramo, también debe establecer 'display: block' para que la propiedad width tenga efecto. –
Es posible, pero cómo depende de lo que está tratando de lograr. Si es esto:
| Alineado a la izquierda Alineado a la derecha | en una celda, puede utilizar 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 se trata de | Alineado a la izquierda
Right Aligned |
Entonces la solución de Balon es correcta.
Si se trata de: | Alineado a la izquierda | Alineado a la derecha |
Entonces es:
<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>
me ocurrió esto mientras tratando de encontrar la manera de visualizar la moneda ('$' a la izquierda, el número a la derecha) en las celdas:
<div class="currency">20.34</div>
.currency {
text-align: right;
width: 100%;
}
.currency:before {
content: "$";
float: left;
}
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>
Esto significa .... centrado? – duffymo
@duffy: no quiere decir alineado. He notado que las personas a menudo confunden "justificar" con "alineado" sin hacer la distinción entre justificación, es decir. un borde de línea al ras - y alineación - un borde irregular. de hecho, en muchas aplicaciones solo hay "justificación izquierda". – prodigitalson
gracias por la corrección, creo que soy una de esas personas confundidas. – duffymo