Question

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

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

我/我们从我的Investec帐户授权WITHDRAWALS到DIRECT 来自此指定账户的借记
我/我们仅从我的帐户授权撤销指定帐户
我/我们仅通过此指定帐户授权直接付款到我的帐户

我的css：

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

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

Answer 1

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

<label style="width:420">

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

Answer 2

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

Answer 3

这适用于IE8，IE7和FF;我没有IE6在这里测试，但方法应该是合理的。我假设您可以自由编辑HTML。

基本上，将左边距填充添加到标签中，并将position：relative设置为使子节点从中继承位置，然后在单选按钮上使用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; }

如果人们打算投票，他们至少可以说出原因。

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

3 个答案: