Question

我对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始终保持在同一条线上。但是，当我将 放在第一个标签的末尾和第二个标签的开头之间时，它会断开但在第二行的开头添加一个空格。我不想复制整个页面，但我想知道是否有人会对如何解决这个问题有一个很好的想法..

感谢阅读！

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

Answer 1

默认情况下，

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>

在IE中标签之间的界限

1 个答案: