在IE中标签之间的界限

时间:2013-01-11 22:07:38

标签: html internet-explorer label

我对IE有一个有趣的问题。 我有一个大页面,其中部分代码是这样的:

<html>
<head>
</head>
<body>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<TD style="PADDING-RIGHT: 2px" >Label:
</TD>
<TD  >
    <LABEL style="WHITE-SPACE: nowrap">
    <INPUT  type="radio" name="inputs" /> 
    input 1 
    </LABEL>

    <LABEL style="WHITE-SPACE: nowrap">
    <INPUT type="radio" name="inputs" /> 
    input 2 blah bblah </LABEL>
</TD>
</tr>
</table>
</body>
</html>

然后,当我改变页面的宽度时,我希望单选按钮+标签在第二行中断。这适用于所有浏览器,并在IE中使用我正在使用的代码作为示例。 事情是相同的,除了页面中的其他东西,并且在我的示例中它在表格周围有另一个表格。但是,它并没有破裂。两个radiobuttons + lable始终保持在同一条线上。 但是,当我将&nbsp;放在第一个标签的末尾和第二个标签的开头之间时,它会断开但在第二行的开头添加一个空格。 我不想复制整个页面,但我想知道是否有人会对如何解决这个问题有一个很好的想法..

感谢阅读!

更新: 我注意到如果我从第一个标签中删除style="WHITE-SPACE: nowrap",第二个单选按钮+标签将会中断到下一行。但它可能会破坏“输入1”文本太大(我想避免这种情况)。所以我不确定如何防止这种情况。

1 个答案:

答案 0 :(得分:0)

默认情况下,

LABEL元素是内联的。将LABEL {display: block; }规则添加到CSS中。或者,如果您希望防止在单独的display: inline-block / display: block对中划分线,同时在需要时能够在线对之间断开线,则使用input代替label。在IE 6/7(如果需要)中,display: inline; zoom: 1;可以实现类似的效果。

顺便说一句,您的代码非常老派,并且可以从转换为更多语义/结构标记中受益。例如:

<dl>
    <dt><label for="example">Example label</label></dt>
    <dd><input type="text" name="example" id="example" /></dd>

    <dt><label for="foobar">Foobar</label></dt>
    <dd><input type="text" name="foobar" id="foobar" /></dd>
</dl>