IE7中的长标签单选按钮问题
我有一个带有长标签的单选按钮，可以换行到下一行，它在 Firefox 和 IE8 中可以正确显示，但在 IE7 和 IE6 中则不能。
基本上，我想要的如下所示（其中 o 是单选按钮）：
- 我/我们授权从我的天达账户直接提款 从此指定账户借记
- 我/我们仅授权从我的账户向该账户提款 指定账户
- 我/我们仅授权从此指定账户直接扣款 到我的帐户
我的css：
label {
float:none;
padding-left: 15px;
text-align:left;
width:420px;
display:block;
margin-left; 10px;
}
在IE7和IE6中，下一行位于单选按钮下方，而不是标签第一个单词的第一个字母下方
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
只需增加标签的宽度即可。也许您可以使用内联标签，例如，
或者您可以将其添加为 CSS 中标签的属性。
Just increase the width of the label. Maybe you can go with an inline tag, e.g.
Or you can add this as a property in the CSS for label.
<!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><!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>这对我来说适用于 IE8、IE7 和 FF；我这里没有 IE6 来测试，但方法应该是合理的。我假设您可以自由编辑 HTML。
基本上，向标签添加左填充和position:relative，以便子项从中继承位置，然后在单选按钮上使用position:absolute将其定位在该填充中。
HTML：
CSS：
如果人们要否决某些东西，他们至少可以说出原因。
This works for me in IE8, IE7 and FF; I don't have IE6 here to test with but the approach should be sound. I assume you have the freedom to edit the HTML.
Basically, add left padding to the label, and position:relative so that children inherit position from it, then use position:absolute on the radio button to position it in that padding.
HTML:
CSS:
If people are going to downvote stuff, they could at least say why.