允许不能有换行符的相邻元素之间的换行符

Question

我有一个HTML表单，其中包含一大堆复选框和标签。它足以包裹到第二条物理线路上。我正在尝试确保每个标签都位于其复选框旁边（而不是第一行以其标签位于下一行开头的复选框结尾），方法是将每个标签包裹在一个禁止换行的范围内{{ 1}}。

这样可行，但会引起副作用。

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

在IE9中，线路根本没有中断，最终只是一个巨大的溢出。

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

这里发生了什么，我该如何妥善解决？ （请不要像强迫一切到精确的像素宽度和手动打破线条 - 复选框列表是动态的

Answer 1

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

span {
  display:inline-block;
}

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

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

Answer 2

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