0

我有一个 HTML 表单，其中包含一大组复选框和连续排列的标签。它足够大，可以包裹到第二条物理线。我试图通过将每对包装在禁止使用white-space: nowrap.

这有效，但会导致副作用。

在 Chrome 中，线路在允许的位置中断，但为时已晚。如果第一行有 7 个复选框和标签的空间，则将其中的 8 个放在那里，溢出父元素的右边框，然后在下一行继续第 9 对。

在 IE9 中，这条线根本没有中断，只是以一个巨大的溢出结束。

http://jsfiddle.net/pmhrx/1/显示了 IE 问题，在创建该问题时，我意外地发现了一个奇怪的解决方法：如果在结束标记之前没有元素间空格</span>，则 IE 会正确添加换行符！请参阅小提琴中的 div2 和 div2a - 它们之间的唯一区别是额外的空格，并且 IE 呈现它们的方式完全不同。

这里发生了什么以及如何正确修复它？（请不要像强制所有内容精确像素宽度并手动断行一样的黑客行为 - 复选框列表是动态的）

4

2 回答 2

0

我认为这是简单地使用<table>'s 和text-align:left;orright;将证明比像素黑客更容易解决这个问题的情况之一，除非我误解了你的目标。

于 2013-10-17T16:54:17.447 回答
0

好的，如果我正确理解您想要的是将所有支票和标签放在一起。为此，您可以使用此属性：

span {
  display:inline-block;
}

您要使用的“nowrap”属性仅适用于文本。

在此处查看您的示例http://jsfiddle.net/pmhrx/3/

于 2013-10-17T17:00:23.727 回答