Поплавок: правое отклоняет порядок пролетов

У меня есть HTML:

 

и CSS:

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

В браузере отображаются в обратном порядке: Импорт параметров экспорта. Могу ли я изменить порядок, изменив только файл CSS и оставив HTML как есть?

Общее решение этой проблемы состоит в том, чтобы либо изменить порядок правильных элементов в HTML, либо обернуть их в содержащийся элемент, и поместить их вправо.

Если вы хотите, чтобы ваши элементы списка были выровнены правильно, без изменения порядка, не плавайте ваши элементы списка. Сделайте их inline вместо этого. text-align: правый диапазон

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

Да, это можно сделать с вашей точной разметкой.

Фокус в том, чтобы использовать direction: rtl;

наценка

  

CSS

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

FIDDLE

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

очень просто!

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

Обновление: два облегченных решения CSS:

Использование гибкого , гибкого streamа и порядка :

Пример 1: Демо-скрипт

  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; } 

В качестве альтернативы, измените масштаб Y:

Пример2: Демо-скрипт

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

Поплавьте div справа вместо элементов span?

Отвечая на ваш обновленный вопрос:

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

Я говорю «путь к div» выше, потому что вам нужно адекватно нацелиться на этот div, который не имеет (по вашему котируемому коду) своего classа или идентификатора. Это не проблема, если мы можем сделать это со структурой.

Так, например, если div является единственным div в контейнере с id (скажем) «навигацией», это может быть:

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

Или, если в контейнере есть другие div, но это единственный, который является прямым дочерним элементом контейнера навигации, вы можете использовать дочерний селектор вместо селектора-потомка:

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

Это работает без перестановки html и очень просто. Вот рабочий пример: http://jsfiddle.net/dzk7c/2/

HTML:

  

и css:

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

может быть, это для кого-то …

http://jsfiddle.net/15abbg81/

может быть только горизонтальным: rtl / ltr таблиц должно работать во всех браузерах, поддерживающих cc-cc cc

нормальный:

 
1
2

задний ход:

 
1
2

Это может быть достигнуто с помощью позиционирования маржи. Обратите внимание, что это будет работать только на IE10 +

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

Я тоже застрял с этим … так вот мое решение

У меня было это раньше и хочу этого после

HTML выглядит так:

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

CSS выглядит так:

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

Просто используйте display: inline-block и text-align: right вместо float: right:

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

вам нужно будет плавать оставшиеся пробелы и правильно поместить родительский контейнер.

это будет зависеть от типа макета, который вы пытаетесь достичь, однако.

это предполагаемое поведение, в интересах читателей экрана и тому подобного, которые я себе представляю. другой вариант – настроить надбавку, но это, как вы говорите, может быть нежелательным.

  • Скрыть текстовый узел в элементе, но не дочерние
  • Наполнение анимации воды
  • Я не хочу наследовать непрозрачность дочернего элемента родителя в CSS
  • Понимание CSS для стилей пользователя в браузере
  • 3 колонки, фиксированная центральная колонка, стороны заполняют родителей
  • Запретить скрытие адресной строки в мобильных браузерах
  • Граница с прозрачной центрированной стрелкой
  • Symfony2 - Assetic - загрузка изображений в CSS
  • Скрытие полосы прокрутки на странице HTML
  • Полноэкранный отзывчивый фоновый рисунок
  • Что такое правильное значение «-moz-appearance», чтобы скрыть стрелку вниз элемента
  • Interesting Posts

    Как RAID 1 определяет, какой диск должен выступать в качестве источника для перестройки?

    Как иметь динамический SQL в хранимой процедуре MySQL

    Лучше ли добавить вторую видеокарту в Crossfire или заменить старую видеокарту?

    Android – доступ к файлу из активов \ PDF-дисплей

    Рассчитать разницу между двумя датами (количество дней)?

    predict.lm () с неизвестным уровнем фактора в тестовых данных

    Измените пользователя, связанного с учетной записью Google Диска (OSX), когда старая учетная запись не существует

    Возвращает локальную строку как срез (& str)

    Как обрабатывать нажатия кнопок с помощью XML onClick внутри fragmentов

    Есть ли простой способ управления большим количеством условных правил форматирования?

    Как создать пакет OSGi из библиотеки jar?

    D3: обновление данных с несколькими элементами в группе

    Почему std :: strstream не рекомендуется?

    «Английская программа автозаполнения» для Windows

    Evolution Gmail Mashup + Фиксация метки времени

    Давайте будем гением компьютера.