Question

我已经制作了一个清单（我想这与使用Windows中的LVS_EX_CHECKBOXES扩展样式的单列List-View类似）使用div并在其中插入带有JS和相关标签的复选框。每一行都是这样的

<label for="cb" style="white-space: nowrap;">Label<input type="checkbox" id="cb" /></label>

我已将div的宽度设置为auto，因此它会根据内容自动调整大小，并确保标签不会在空白处换行但会导致div宽度小于强制水平的内容滚动条出现。

以下是由Firebug报告的JS生成的HTML代码示例：

<div class="employees_list_column">
<div id="employees" class="check_list_wx" style="height: 130px; width: auto;">
<label style="white-space: nowrap" for="checklistwx_employees_35">
<input id="checklistwx_employees_35" type="checkbox" name="checklistwx_employees_35">E*** I*****
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_45">
<input id="checklistwx_employees_45" type="checkbox" name="checklistwx_employees_45">F*** P*****
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_34">
<input id="checklistwx_employees_34" type="checkbox" name="checklistwx_employees_34">J******* C***
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_37">
<input id="checklistwx_employees_37" type="checkbox" name="checklistwx_employees_37">J****** M*****
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_1">
<input id="checklistwx_employees_1" type="checkbox" name="checklistwx_employees_1">L**** M***********
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_2">
<input id="checklistwx_employees_2" type="checkbox" name="checklistwx_employees_2">M****** F*******
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_3">
<input id="checklistwx_employees_3" type="checkbox" name="checklistwx_employees_3">N*** A*******
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_4">
<input id="checklistwx_employees_4" type="checkbox" name="checklistwx_employees_4">O****** P*******
</label>
<br/>
<label style="white-space: nowrap" for="checklistwx_employees_5">
<input id="checklistwx_employees_5" type="checkbox" name="checklistwx_employees_5">P*** T******
</label>
<br/>
</div>
</div>

CSS：

element.style {
  height: 230px;
  width: auto;
}

  .check_list_wx {
  border: 1px solid #BBBBBB;
  margin: 10px;
  overflow: auto;
}

.employees_list_column {
  float: left;
  line-height: 24px;
}

为什么我的div的宽度小于内容的任何想法？

Answer 1

你的CSS中有拼写错误。 check_list_wx被视为DOM节点类型而不是类引用，因为它缺少前面的.。由于它永远不会获得display:inline-block;赋值，因此它将继续被视为块元素并占用父元素的整个宽度。

更改

check_list_wx {
  border: 1px solid #BBBBBB;
  display: inline-block;
  overflow: auto;
}

到

.check_list_wx {
  border: 1px solid #BBBBBB;
  display: inline-block;
  overflow: auto;
}

http://jsfiddle.net/AlienWebguy/zMQey/

Answer 2

width: auto;并不意味着您的div会根据内容自动调整大小。这意味着它会自动获取其父元素的宽度。 width: auto;也是div的默认宽度。

以下是简化的工作样本。请注意复选框列表中的overflow-x: hidden;和padding: 0 16px 0 0;。这样可以确保没有水平滚动条，并且不会在右边缘隐藏任何内容。

<!doctype html>
<html><head>
    <title>Check box list with vertical scrollbar</title>
    <style type="text/css">
        .checkBoxList
        {
            border: 1px solid #BBBBBB;
            height: 130px;
            float: left;
            line-height: 24px;
            padding: 0 16px 0 0;
            overflow: auto;
            overflow-x: hidden;
        }
        .checkBoxList label
        {
            display: block;
            white-space: nowrap;
            letter-spacing: 5px;
        }
    </style>
</head><body>
    <div class="checkBoxList">
        <label for="cb1"><input id="cb1" type="checkbox"/>Check box 1</label>
        <label for="cb2"><input id="cb2" type="checkbox"/>Check box 2</label>
        <label for="cb3"><input id="cb3" type="checkbox"/>Check box 3</label>
        <label for="cb4"><input id="cb4" type="checkbox"/>Check box 4</label>
        <label for="cb5"><input id="cb5" type="checkbox"/>Check box 5</label>
        <label for="cb6"><input id="cb6" type="checkbox"/>Check box 6</label>
        <label for="cb7"><input id="cb7" type="checkbox"/>Check box 7</label>
        <label for="cb8"><input id="cb8" type="checkbox"/>Check box 8</label>
        <label for="cb9"><input id="cb9" type="checkbox"/>Check box 9</label>
    </div>
</body></html>

您可以在此处找到有关CSS溢出属性的更多信息：http://css-tricks.com/2833-the-css-overflow-property/。

Answer 3

如果您希望外部元素环绕内容，则可以使用

float: left;。

修改： http://jsfiddle.net/hdxdw/

宽度：自动问题

3 个答案: