我试图在块内显示复选框，如下所示。
<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
<label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxx</label><br/>
<label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
<label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
<label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
<label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
<label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
<label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
<label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>
它显示了预期的内容，如下所示快照 https://i.stack.imgur.com/TGbZc.png.
当任何一个（或多个）复选框标签长于指定的宽度时，会出现水平滚动条，这是预期的，但它显示复选框标签文本如下图所示的复选框下方快照 https://i.stack.imgur.com/DulSl.png.
在这种情况下，一个（或多个）复选框标签非常长，如下所示。
<label for="chk1">
<input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxxxx
</label><br/>
解决这个问题的办法是什么？每个带有标签的复选框都应显示在一条直线上块内无论标签文本有多长。
使用 CSS 属性white-space: nowrap;像这样我的小提琴 http://jsfiddle.net/wZNtm/
Preview
HTML
<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
<label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxx</label><br/>
<label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
<label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
<label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
<label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
<label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
<label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
<label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>
CSS
label {
white-space:nowrap;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
