我对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”文本太大(我想避免这种情况)。所以我不确定如何防止这种情况。
答案 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>