2010-03-12 21 views
8

Quiero alinear a la derecha un elemento en línea a la derecha de un div. He visto float = "right" aplicado en un lapso para alinearlo a la derecha, pero me parece semánticamente incorrecto ya que se supone que los flotadores mueven "cajas" o bloquean elementos a la derecha oa la izquierda de un elemento contenedor.Flotante de un elemento en línea a la derecha de un div

Entiendo mal Float o hay otra forma de alinear elementos en línea en un contenedor DIV.

+0

Otro problema que tengo al usar Float en un Span es que utilizamos float: justo en un lapso sin especificar un ancho que nuevamente va en contra de los requisitos de un Float. Básicamente, quiero utilizar la propiedad de estiramiento de un elemento en línea, ya que toma el ancho del contenido que en mi caso es dinámico. Convertir eso en un DIV pierde esa ventaja. – Rajat

Respuesta

5

La flotación de un elemento automáticamente lo convierte en una caja. (Ver: http://css.maxdesign.com.au/floatutorial/introduction.htm) Sin embargo, no hay nada semánticamente incorrecto al respecto. La semántica no dicta qué debe mostrarse como un bloque y qué se debe mostrar en línea: esa es una de las razones por las que podemos declarar eso arbitrariamente. (Ciertamente se convierte en desordenado cuando empiezas a quitar palabras de su orden, pero dudo que sea de lo que estás hablando aquí, ya que no puedo imaginar un caso en el que quieras hacer que y tengan permanece en línea.)

Además, si necesita alinear un poco de texto en línea independiente del flujo de texto normal (que es lo que hace un flotador), realmente desea mostrarlo como un bloque de todos modos. Si es realmente un elemento en línea, todo lo que necesita es text-align:right: cualquier cosa que necesite un flotador o una posición declarada sobre usted ya está tratando como un elemento de bloque, por lo que no hay nada de malo en declararlo como tal.

+0

pero no se recomienda el uso de Float without width y en este quiero que mi ancho sea = contenido y, por lo tanto, el elemento en línea? Entonces, si mi elemento es un elemento de bloque con Float, ¿no tendría el ancho especificado lastimado? – Rajat

+1

@Rajat No tener el ancho especificado significa que, de forma predeterminada, su flotante se reducirá al tamaño de la palabra más larga. Puedes usar white-space: nowrap para anular ese comportamiento, entonces será tan ancho como tu contenido. (Así que asegúrese de poner un BR si lo necesita para envolver). –

6

float: right está perfectamente bien aplicado a todos los elementos, a nivel de bloque o en línea no importa, ya sea semánticamente o de acuerdo con la especificación (por lo que yo sepa).

Si quieres algo bien-align sin utilizar float luego está la posibilidad de margin-right: 90%; (asumiendo que usted sabe que lo que está bien alineado desde/en contra encaja en el otro 10%.

O direction: rtl; pero eso nunca funciona como creo que debería, además es probable que complique las cosas.

position: absolute; right: 0; haría lo que necesite (pero se eliminaría del flujo del documento, y se colocaría frente al primero de sus elementos principales que tiene un position: relative; definido (o al menos position).

Posiblemente podría utilizar text-align: right, pero parece una solución tan simple que estoy seguro de que ya lo habrá probado.

Si pudiera proporcionar un caso de uso, algún código y una indicación de su resultado final esperado, podríamos ayudarlo más.

Cuestiones relacionadas