Gibt es eine solide Möglichkeit, Etiketten an ihren Steuerelementen auszurichten?

Question

Ich bin auf der Suche nach einer geradlinigen CSS-Lösung, die die Ausrichtung von Beschriftungen mit ihren Steuerelementen in ASP erzwingt. So zum Beispiel:

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

scheint so etwas wie:

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

Irgendwelche Ideen?

Answer 1

sie beide in einer Spanne oder div Wrap:

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

Dann:

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

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

Answer 2

Sie können versuchen, sie in einem Behälter, und gelten spezifische Styling für Spannweiten innerhalb dieser Behälter setzen. Das folgende Beispiel könnte ein wenig Gefummel brauchen, aber es sollte Sie in der richtigen Richtung:

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

Und dann auf der Seite:

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