Is there a solid way to top align labels to their controls?

问题

I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:

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

Would appear something like:

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

Any ideas?

回答1:

Wrap them both in a span or div:

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

Then:

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

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

回答2:

You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:

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

And then on the page:

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

来源：https://stackoverflow.com/questions/9945632/is-there-a-solid-way-to-top-align-labels-to-their-controls