使用CSS切换< label>的左/右位置和< input>在IE7 + [英] Using CSS to switch left/right position of <label> and <input> in IE7+

问题描述

我有一个包含< label> ，< input> 如下所示：

I have a form comprising a sequence of <label>, <input> pairs (one per line) as follows:

<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的方式来修改第二行显示< label> 的左侧的 修改HTML）。

I'm looking for a pure-CSS way to modify the second line to display the <input> checkbox to the left of the <label> (i.e. exchange their order without modifying the HTML).

以下简单规则在Firefox，Chrome，Safari，Opera和IE8 +中完美运行...

The following simple rule works perfectly in Firefox, Chrome, Safari, Opera, IE8+...

li.reversed input {
   float: left;
}

...但在IE7看起来很糟糕：< input> 复选框悬浮在左侧（根据需要），但是< label> / em>。

... but it looks awful on IE7: the <input> checkbox floats to the left (as required), but the <label> appears on the preceding line.

我可以发现，在所有浏览器上最简单的解决方案是放弃 float 绝对定位，即：

The simplest solution I can find that works on all browsers is to abandon float altogether and use absolute positioning, i.e.:

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

任何人都可以提出更好的方法？非常感谢...

Can anyone suggest a better way? Many thanks...

推荐答案

改用下面的样式表：

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

这看起来有点苦，但它将元素转换为方向性方向是从右到左，但在其子元素内从左到右。净效果只是子元素，复选框和标签的视觉布局顺序颠倒。

This looks a bit contrived, but it turns the element to a directionality isolate where the direction is right to left but inside its sub-elements left to right. The net effect is just that the visual layout order of the sub-elements, the checkbox and the label, is reversed.

这里是一个小小的代码，看看它在行动。

这篇关于使用CSS切换< label>的左/右位置和< input>在IE7 +的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！