有沒有可靠的方法來將標籤對齊到他們的控件？

我正在尋找一個直接的css解決方案，它將強制標籤頂部與asp中的控件一致。因此，例如：有沒有可靠的方法來將標籤對齊到他們的控件？

<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" /> 
<asp:DropDownList runat="server" ID="cboBox" />

似乎是這樣的：

Control Label 
[[[[[]]]]]]]]]]]]V

任何想法？

來源

2012-03-30 Sinaesthetic

總結他們無論在SPAN或DIV：

<span class="field"> 
    <asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" /> 
    <asp:DropDownList runat="server" ID="cboBox" /> 
</span>

然後：

.field label, 
.field select 
{ 
    display: inline-block; 
    vertical-align: top; 

    /* achieves same as inline-block for IE7 */ 
    *display: inline; 
    *zoom: 1; 
}

來源

2012-03-30 15:20:24 Carl

這似乎並不奏效。標籤仍然在控件的左側 – Sinaesthetic 2012-03-30 20:38:37

啊，我錯過了那一點，我的回答只處理頂端對齊。你可以浮動選擇左側，這將做到這一點？ – Carl 2012-04-02 09:01:13

你可以試試把它們放在一個容器中，並應用特定的造型爲容器內的跨度。下面的例子可能需要一些調整，但它應該指向你在正確的方向：

div.container span { 
    display: table-cell; 
    vertical-align: top; 
} 
div.container input { 
    display: table-cell; 
    vertical-align:middle; 
}

然後在頁面上：

<div class="container"> 
    <asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" /> 
    <asp:DropDownList runat="server" ID="cboBox" />  
</div>

來源

2012-03-30 15:24:01

有沒有可靠的方法來將標籤對齊到他們的控件？

回答

相關問題