问题描述
我有一个包含的 修改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 +的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！