IE7问题中的长标签单选按钮

我有一个长标签的单选按钮，包装到下一行，它在Firefox和IE8中正确显示，但不在IE7和IE6中显示。IE7问题中的长标签单选按钮

基本上，我想下面所示的情况（其中o是单选按钮）：

我/我们授权从我Investec的帐户提款和DIRECT DEBITS从这个指定账户
I /我们授权取款只能从我的户头上这个指定账户
我/我们授权直接扣款只能从这个指定账户到我的帐户

个

我的CSS：

label { 
    float:none; 
    padding-left: 15px; 
    text-align:left; 
    width:420px; 
    display:block; 
    margin-left; 10px; 
}

在IE7和IE6，下一行是单选按钮下，不根据标签

来源

2010-07-01 user474079

-1

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <style> 
html { 
    font: 12px sans-serif; 
} 
form 
ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 400px; 
} 
label { 
    cursor: pointer; 
} 
input { 
    float: left; 
} 
     </style> 
    </head> 
    <body> 
     <form action=""> 
      <ul> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label> 
       </li> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS ONLY from my account to this designated account</label> 
       </li> 
       <li> 
        <label><input type="radio" name="authorise"> I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label> 
       </li> 
      </ul> 
     </form> 
    </body> 
</html>

来源

2010-07-01 13:47:30 reisio

-1

的第一个单词的第一个字母这对我的作品在IE8，IE7和FF中;我没有在这里测试IE6，但方法应该是合理的。我假设你有编辑HTML的自由。

基本上，左边的填充添加到标签，位置：相对，以便孩子从它继承位置，然后使用单选按钮上的position：absolute将其定位在该填充中。

HTML：

<label><input type="radio" />I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label> 
    <label><input type="radio" />I/we authorise WITHDRAWALS ONLY from my account to this designated account</label> 
    <label><input type="radio" />I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>

CSS：

label { position:relative;top:0; padding-left:25px; text-align:left; width:420px; display:block; } 
label input { position:absolute; top:0;left:0; }

如果人们要downvote东西，他们至少可以说这是为什么。

来源

2010-07-01 14:01:41

看起来你甚至不满意你的这个答案，但是当有人低估它的时候你会感到不安。 – reisio 2011-08-02 19:56:36

只需增加标签的宽度即可。也许你可以使用内联标签，例如

<label style="width:420">

或者您可以将此添加为标签CSS的属性。

来源

2011-12-02 10:38:18 Ams

IE7问题中的长标签单选按钮

回答

相关问题