Using CSS to switch left/right position of <label> and <input> in IE7+

问题:

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>

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).

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

li.reversed input {    float: left; }

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

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...

回答1:

Use the following style sheet instead:

.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.

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

回答2:

This worked of me (you would want to target IE7, and maybe tweak the numbers slightly).

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

转载请标明出处:Using CSS to switch left/right position of <label> and <input> in IE7+

文章来源: Using CSS to switch left/right position of and in IE7+