Использование CSS для переключения положения влево / вправо <label>и <input>в IE7 +

Question

У меня есть форма, содержащая последовательность пар <label>, <input> (по одной на строку) следующим образом:

<ol style="list-style: none;">
  <li class="normal">
    <label>Channel Name</label>
    <input type="text">
  </li>
  <li class="reversed">
    <label>Subscribe to this channel</label>
    <input type="checkbox">
  </li>
</ol>

Я ищу способ изменения второго в чистом CSSстрока для отображения флажка <input> слева от <label> (т. е. обменять их порядок без изменения HTML).

Следующее простое правило отлично работает в Firefox, Chrome,Safari, Opera, IE8 + ...

li.reversed input {
   float: left;
}

... но в IE7 это выглядит ужасно: флажок <input> плавает влево (при необходимости), , но появляется <label>в предыдущей строке .

Самое простое решение, которое я могу найти, которое работает во всех браузерах, - это отказаться от float в целом и использовать абсолютное позиционирование, то есть:

li.reversed {
   position: relative;
}
li.reversed label {
   position: absolute;
   left: 20px;
}

Может кто угоднопредложить лучший способ?Большое спасибо ...

Answer 1

Вместо этого используйте следующую таблицу стилей:

.reversed {
  unicode-bidi: embed;
  direction: rtl;
  text-align: left;
}
.reversed * {
  unicode-bidi: embed;
  direction: ltr;
}

Это выглядит немного надуманным, но это превращает элемент в изолятор направленности, где направление направо справа налево, но внутри его подэлементов слева направо,Чистый эффект заключается лишь в том, что визуальный порядок расположения подэлементов, флажок и метка поменялись местами.

Вот скрипка кода, чтобы увидеть его в действии.

Answer 2

Это сработало у меня (вы хотели бы нацелиться на IE7 и, возможно, немного подправить числа).

li.reversed input {
   float: left;
   margin-top: -1.2em; 
}

li.reversed label {
    margin-left: 20px;
}