使用 div 在块中显示复选框答案

【问题标题】：Displaying check boxes within a block using a div使用 div 在块中显示复选框
【发布时间】：2014-09-14 13:15:44
【问题描述】：

我正在尝试在块中显示复选框，如下所示。

<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>

它会显示预期的内容，如以下snap shot 所示。

当任何一个（或多个）复选框标签长于指定宽度时，会出现一个水平滚动条，这是预期的，但它会在复选框下方显示复选框标签文本，如关注snap shot。

在这种情况下，一个（或多个）复选框标签很长，如下所示。

<label for="chk1">
  <input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxxxx
</label><br/>

解决办法是什么？每个带有标签的复选框都应该在块内以直线显示，无论标签文本有多长。

【问题讨论】：

标签： html css checkbox

【解决方案1】：

使用 CSS 属性 white-space: nowrap; 像这样 My Fiddle

预览

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;
}

【讨论】：

【解决方案2】：

您可以将这 5 个 css 属性添加到标签中：

label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

http://jsfiddle.net/USdKK/

【讨论】：

@Mr.Alien 仅当它太长时。取决于 op 想要什么。