将复选框与标签对齐 - 我做错了什么？

Question

我有一个字段集，里面有一个 div，里面有标签和文本框、标签和下拉菜单以及带有复选框的标签。带有文本框的标签可以很好地对齐，带有下拉菜单的标签可以很好地对齐。但是，我根本无法让复选框与标签对齐。我做错了什么？

<div class="col1">
<label id="lblVehicleID" for="txtVehicleID" class="vehicle_label">Vehicle ID:</label>
<asp:TextBox ID="txtVehicleID" runat="server" class="vehicle_input"></asp:TextBox>

<label id="lblName" for="txtVehicleName"  class="vehicle_label">Vehicle Name:</label>
<asp:TextBox ID="txtVehicleName" runat="server"  class="vehicle_input"></asp:TextBox>

<label id="lblCategorization" for="txtCategorization"  class="vehicle_label">Categorization:</label>
<asp:TextBox ID="txtCategorization" runat="server"  class="vehicle_input">         </asp:TextBox>

<label id="lblDomicileCountry" for="ddlDomicileCountry" class="vehicle_label">Domicile Country:</label>
<asp:DropDownList ID="ddlDomicileCountry" runat="server" CssClass="vehicle_dd"></asp:DropDownList>


<label id="lblUSOrganized" for="chkUSOrganized" class="vehicle_label">US Organized/Established:</label>
<asp:CheckBox ID="chkUSOrganized" runat="server" ></asp:CheckBox>


<label id="lblOfferedToNonUS" for="chkOfferedToNonUS" class="vehicle_label">Offered to Only Non-US:</label>
<asp:CheckBox ID="chkOfferedToNonUS" runat="server"></asp:CheckBox>

</div>

这是 CSS：

    .col1 {
      width: 500px;
      border: 1px solid black;
      float: left;
      padding: 5px;
    }

    .vehicle_label {
       float:left;
       width: 190px;
       text-align:right;
       padding-right:12px;
       margin-top:12px;
       clear:left;
       font-family:Arial, Helvetica, sans-serif;
    }

    .vehicle_input, .vehicle_dd {
       margin-top: 12px;
       width:175px;
    }

我试过了，但没用：

 input[type=checkbox] + label {
 display: inline-block;
 margin-left: 0.5em;
 margin-right: 2em;
 line-height: 1em;
 }

任何帮助将不胜感激！我知道有与此类似的问题，但无法弄清楚我做错了什么。

谢谢

Answer 1

复选框只是浮动在其他输入元素旁边，尝试在输入元素之后使用 clearfix 清除浮动；

<div class=".clearfix"></div>

我在这里创建了您的代码的工作演示； http://jsfiddle.net/BmM2x/1/