Css IE7问题中的长标签单选按钮_Css_Button_Label_Radio_Internet Explorer 7

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

css button

Css IE7问题中的长标签单选按钮,css,button,label,radio,internet-explorer-7,Css,Button,Label,Radio,Internet Explorer 7,我有一个带有长标签的单选按钮，它被包装到下一行，它在Firefox和IE8中正确显示，但在IE7和IE6中没有基本上，我想要的如下所示（其中o是单选按钮）：我/我们授权从我的天达账户提款，并指示从该指定账户借记我/我们仅授权从我的账户向本账户提款指定账户我/我们仅授权从该指定账户直接借记记在我的账上我的css： label { float:none; padding-left: 15px; text-align:left; width:420px; dis

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

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

我/我们授权从我的天达账户提款，并指示从该指定账户借记
我/我们仅授权从我的账户向本账户提款指定账户
我/我们仅授权从该指定账户直接借记记在我的账上

我的css：

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

在IE7和IE6中，下一行位于单选按钮下方，而不是标签第一个单词的第一个字母下方

<!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> html{ 字体：12px无衬线； } 形式保险商实验室{ 列表样式：无；保证金：0；填充：0；宽度：400px； } 标签{ 光标：指针； } 输入{ 浮动：左； }

我/我们授权从我的天达账户提款，并直接从该指定账户借记
我/我们仅授权从我的账户向该指定账户提款
我/我们仅授权从该指定账户直接借记我的账户

这在IE8、IE7和FF中对我有效；我这里没有IE6可供测试，但方法应该是合理的。我假设您有编辑HTML的自由

基本上，将左填充添加到标签中，并使用position:relative使子项从标签中继承位置，然后使用单选按钮上的position:absolute将其定位到该填充中

HTML:

如果人们要否决某些东西，他们至少可以说出原因。

只要增加标签的宽度就行了。也许你可以使用内联标签，例如

<label style="width:420">

或者您可以将其作为属性添加到CSS for标签中。

似乎您对自己的答案并不满意，但当有人否决它时，您会感到不安。

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

<label style="width:420">