width: auto problem_问答_开发者_运维开发者技术经验分享

I've made a checklist (which I guess would be similar to a single column List-View with the LVS_EX_CHECKBOXES extended style in Windows) using a div and inserting checkboxes in it with JS and associated label each on their own line. Each line would look like this

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

I've set the width of the div to be auto so it automatically resizes based on the content and made sure the labels don't wrap on white spaces but that cause the div width to be smaller than the content forcing a horizontal scroll bar to appear.

Here's an example of the HTML code produced by the JS as reported by Firebug:

<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*******
</lab开发者_JAVA百科el>
<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>

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

Any ideas why the width of my div is smaller than the content?

You have a typo in your CSS. check_list_wx is being treated as a DOM node type instead of a class reference because it is missing the preceding .. Since it never gets the display:inline-block; assignment, it continues to be treated as a block element and takes up the full width of the parent.

Change

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/

width: auto; does not mean that your div will automatically resize based on the content. It means that it automatically takes the width of its parent element. width: auto; is also the default width of a div.

Below is a simplified working sample. Notice the overflow-x: hidden; and padding: 0 16px 0 0; on the check box list. This makes sure that there will be no horizontal scrollbar and that no content will be hidden at the right edge.

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

You can find more information about the CSS overflow property here: http://css-tricks.com/2833-the-css-overflow-property/.

float: left; is the thing that you can use if you want the outer element to wrap around the content.

Edit: http://jsfiddle.net/hdxdw/