我根据应用程序样式指南设置了假的复选框。
<label>
<input type="checkbox" />
<span class="fake-checkbox"></span>
<span class="actual-label">
...
</span>
</label>
我隐藏输入并将SPAN设为inline-block。只要复选框标签足够窄以适合单行，这就很有用。当标签文本太长而不适合单行时，问题就变得明显了，它在一行中分成一个新行，使行中的复选框保持不变。
如果我设置label { white-space: nowrap; }和.actual-label { white-space: normal; }，则复选框和文字会保持在同一行，实际标签文本会分成多行，但它具有100％的内容宽度，而不是更少的假复选框。
我的复选框必须允许在同一行或列等中定位几个...就像常规复选框一样。这仅仅意味着浮动被排除在外。
我可以通过使用flexbox完全达到我想要的效果，但不幸的是我需要支持没有flexbox的旧浏览器。
我有多少方法可以使多行实际标签span占用所有其余宽度并分成几行。我无法使用的东西：
我创建了a Plnkr example，其中两次显示相同的控件。首先是有问题的形式，其次是它应该显示的方式。第二个控件使用我无法使用的flexbox设计。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
white-space: nowrap;
font-size: 0;
}
label * {
white-space: normal;
font-size: initial;
}
label .fake-checkbox {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
vertical-align: top;
box-sizing: border-box;
}
label .fake-checkbox:before {
content: "";
display: inline-block;
}
label .actual-label {
display: inline-block;
vertical-align: top;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: flex-end;
align-items: flex-start;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
flex-shrink: 0;
flex-grow: 0;
display: block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
section .actual-label {
outline: 1px solid rgba(0, 0, 0, 0.25);
}<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
<br/>
<br/>
<section>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</section>
答案 0 :(得分：0)
CSS表格
Support很好地回到了IE8
section {
display: table;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
display: table-cell;
display: block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
section .actual-label {
display: table-cell;
outline: 1px solid rgba(0, 0, 0, 0.25);
}<section>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</section>
答案 1 :(得分：0)
典型的浮动布局：
overflow: hidden。你说你不能使用花车，但它们只适用于古老的浏览器。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
label .fake-checkbox {
float: left;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 8px;
box-sizing: border-box;
}
label .actual-label {
display: block;
overflow: hidden;
outline: 1px solid rgba(0, 0, 0, 0.25);
}<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>
或者，由于复选框的宽度已知，您可以将其完全取消流程，并为标签添加一些边距。
label {
display: inline-block;
outline: 1px solid rgba(0, 0, 0, 0.25);
}
label .fake-checkbox {
position: absolute;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 2px;
box-sizing: border-box;
}
label .actual-label {
display: block;
min-height: 18px;
margin-left: 26px;
outline: 1px solid rgba(0, 0, 0, 0.25);
}<label>
<span class="fake-checkbox"></span>
<span class="actual-label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
</span>
</label>