Flotante: derecho invierte el orden de los tramos

Tengo el HTML:

 

y CSS:

 span.button { float:right; } span.label { margin-left: 30px; } 

En el navegador, los espacios se muestran en el orden inverso: Importar configuración de exportación. ¿Puedo cambiar el orden cambiando solo el archivo CSS y dejar el HTML como está?

La solución general a este problema es invertir el orden de los elementos flotados correctos en el HTML, o envolverlos en un elemento contenedor y flotar a la derecha en su lugar.

Si desea alinear los elementos de la lista sin invertir el orden, no haga flotar los elementos de la lista. Hazlos en línea en su lugar. text-align: right your span

 div { text-align:right; } span { display:inline; } 

Sí, esto se puede hacer con su marcado exacto.

El truco es usar la direction: rtl;

Margen

  

CSS

 div { direction: rtl; } span.label { float: left; margin-left: 30px; } 

VIOLÍN

 div.outerclass { text-align: right; } div.outerclass .label { float: left; text-align: left; } 

¡muy fácil!

 div.outerclass { float: right; } div.innerclass { float: left; } 

Actualización: dos soluciones ligeras de CSS:

Usando flex , flex-flow y orden :

Ejemplo 1: Demo Fiddle

  div{ display:flex; flex-flow: column; } span:nth-child(1){ order:4; } span:nth-child(2){ order:3; } span:nth-child(3){ order:2; } span:nth-child(4){ order:1; } 

Alternativamente, invierta la escala Y:

Ejemplo 2: Demo Fiddle

 div { -webkit-transform: scaleY(-1); transform: scaleY(-1); } span { -webkit-transform: scaleY(-1); transform: scaleY(-1); display:inline-block; width:100%; } 

¿Flotar el div derecho en lugar de los elementos del tramo?

Respondiendo a su pregunta actualizada:

 path to div { text-align: right; } path to div span.label { float: left; } 

Digo “path to div” arriba porque necesita apuntar adecuadamente a este div, que no tiene (según su código citado) una clase o ID propio. Eso no es un problema si podemos hacerlo con estructura.

Entonces, por ejemplo, si el div es el único div dentro de un contenedor con el id (por ejemplo) “navegación”, podría ser:

 #navigation div { text-align: right; } #navigation div span.label { float: left; } 

O si hay otros divs en el contenedor, pero este es el único que es un elemento directo del contenedor de navegación, puede usar un selector secundario en lugar de un selector descendente:

 #navigation > div { text-align: right; } #navigation > div span.label { float: left; } 

Esto funciona sin reorganizar el html y es muy simple. Aquí hay un ejemplo de trabajo: http://jsfiddle.net/dzk7c/2/

html:

  

y css:

 div { float:right; } span { display: inline-block; } 

tal vez esto, para alguien …

http://jsfiddle.net/15abbg81/

solo horizontal, puede ser de uso: rtl / ltr de tablas debería funcionar en todos los navegadores compatibles con CSS de celdas de tabla

normal:

 
1
2

marcha atrás:

 
1
2

Se puede lograr usando el posicionamiento de margen flexible. Tenga en cuenta que esto solo funcionará en IE10 +

 div { display: flex; } span.label { margin: auto; margin-left: 0; } span.button { margin-right: 5px; } 

También me quedo atascado con esto … así que aquí está mi solución

Tenía esto antes y quiero esto después

HTML se ve así

 
    @foreach($restaurant->categories as $category)
  • {{ $category->title }}
  • @endforeach @foreach($restaurant->labels as $label)
  • {{ $label->title }}
  • @endforeach

CSS se ve así

 .restaurant-thumbnail__tags { direction: rtl; -webkit-transform: scaleY(-1); transform: scaleY(-1); } .restaurant-thumbnail__tags li { -webkit-transform: scaleY(-1); transform: scaleY(-1); } 

Simplemente use display: inline-block y text-align: right en lugar de float: right:

 div { text-align:right } span { display:inline-block } 

necesitaría flotar los tramos a la izquierda, y flotar el contenedor principal a la derecha.

esto dependerá del tipo de diseño que estés tratando de lograr sin embargo.

es el comportamiento previsto, para el beneficio de los lectores de pantalla y cosas así que imagino. la otra opción es ajustar el margen, pero esto, como dices, puede no ser deseable.