1

我在 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 中使用我作为示例使用的代码。事情是一样的，除了页面中的其他内容，在我的示例中，它在表格周围有另一个表格。但是，它不会破裂。两个单选按钮+标签始终保持在同一行。但是，当我&nbsp;在第一个标签的末尾和第二个标签的开头之间放置时，它会中断，但会在第二行的开头添加一个空格。我不想复制整个页面，但我想知道是否有人会对如何解决这个问题有一个绝妙的主意..

谢谢阅读！

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

4

1 回答 1

0

LABEL默认情况下，元素是内联的。将LABEL {display: block; }规则添加到您的 CSS。或者，如果您想防止在单独/对内断线，同时能够在需要时在对之间断线，请使用display: inline-block而不是。在 IE 6/7（如果需要）中，可以使用.display: blockinputlabeldisplay: 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>
于 2013-01-11T22:40:43.973 回答