將複選框與標籤對齊 - 我做錯了什麼？

我有一個帶有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; 
}

任何幫助將不勝感激！我知道有類似這個問題，但一直沒能弄清楚我做錯了什麼。

謝謝

來源

2014-07-23 Alex

不是答案，但有時候將複選框放在標籤內部很好，可以消除這個問題。 – numbers1311407

複選框只是浮旁邊的其他投入要素，嘗試清除浮球隨輸入元素後clearfix;

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

我在這裏創建了一個代碼的工作演示; http://jsfiddle.net/BmM2x/1/

來源

2014-07-23 22:51:33

上帝保佑你！這絕對有效。但是，它只有在控件更改爲html控件而不是.net控件時才起作用。我將不得不以這種方式與他們合作。感謝您的幫助！ – Alex

將複選框與標籤對齊 - 我做錯了什麼？

回答

相關問題