0

I have a radio button with long labels that wraps to the next line, it is displaying correctly in Firefox and IE8, but not in IE7 and IE6.

Basically, what I want is shown below (where o is the radio button):

  • I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account
  • I/we authorise WITHDRAWALS ONLY from my account to this designated account
  • I/we authorise DIRECT DEBITS ONLY from this designated account to my account

My css:

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

In IE7 and IE6, the next line is under the radio button, not under the first letter of the first word of the label

4

3 回答 3

1

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

<label style="width:420">

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

于 2011-12-02T10:38:18.170 回答
-1

这适用于 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; }

如果人们要投反对票，他们至少可以说出原因。

于 2010-07-01T14:01:41.617 回答
-1 
<!doctype html>
<html>
    <头部>
        <标题></标题>
        <风格>
html {
    字体：12px 无衬线；
}
形式
ul {
    列表样式：无；
    边距：0；
    填充：0；
    宽度：400px；
}
标签 {
    光标：指针；
}
输入 {
    向左飘浮;
}
        </style>
    </head>
    <正文>
        <form action="">
            <ul>
                <li>
                    <label><input type="radio" name="authorise"> 我/我们授权从我的 Investec 账户向该指定账户提款和直接借记</label>
                </li>
                <li>
                    <label><input type="radio" name="authorise"> 我/我们只授权从我的账户提现到这个指定的账户</label>
                </li>
                <li>
                    <label><input type="radio" name="authorise"> 我/我们只授权从这个指定账户向我的账户直接扣款</label>
                </li>
            </ul>
        </form>
    </正文>
</html>
于 2010-07-01T13:47:30.297 回答