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

Question

我有一个 HTML 表单，其中包含一大组排列成一行的复选框和标签。它足够大，可以缠绕到第二条物理线路上。我试图通过将每对包装在一个禁止使用 white-space: nowrap 换行的跨度中来确保每个标签都停留在其复选框旁边(而不是第一行以在下一行开头具有其标签的复选框结尾)。

这有效，但会产生副作用。

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

在 IE9 中，该行根本不会中断，只是以巨大的溢出结束。

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

这是怎么回事，我该如何正确修复它？ (请不要像强制所有内容都精确到像素宽度并手动断开线条那样的技巧 - 复选框列表是动态的)

Answer 1

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

span {
  display:inline-block;
}

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

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