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>出现在前一行。< / p>
我能找到适用于所有浏览器的最简单的解决方案是完全放弃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;
}

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

Here's a fiddle of the code to see it in action.

Answer 2

This worked of me（您可能希望定位IE7，并可能略微调整数字。）

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

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

使用CSS在IE7 + </label>中切换<label>和<input />的左/右位置

2 个答案: