javascript - 宽度: auto problem

Question

我使用 div 制作了一个 list (我猜它类似于 Windows 中具有 LVS_EX_CHECKBOXES 扩展样式的单列 ListView )，并使用 JS 和关联标签在其中插入复选框，每个复选框都在自己的行上。每行看起来像这样

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

我已将 div 的宽度设置为自动，以便它根据内容自动调整大小，并确保标签不会包裹在空白处，但这会导致 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; 赋值，因此它继续被视为 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/