asp.net - 使用 CSS 对齐表中的 ASP 控件

Question

我想对齐 ASP 标签和文本框，但我迷失在 CSS 森林中。控件对齐不好。 (抱歉，我的 CSS 代码不好。)我想将控件成对放置在彼此下方 (Label+TextBox)。请帮忙。

aspx 页面:

<asp:TableCell ID="tc0" runat="server" CssClass="searchTableLabelsCell">
    <asp:Label ID="lblrefNo" runat="server" Text="RefNo:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtRefNo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:Label ID="lblFrom" runat="server" Text="From:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtFrom" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:Label ID="lblTo" runat="server" Text="To:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtTo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:Label ID="lblCc" runat="server" Text="Cc:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtCc" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
</asp:TableCell>

CSS

.searchTableLabelsCell
{
    font: 12px Verdana;
    width: 300px;      /* it must be 300px */
    border-style: none;
    padding: 0px;
    margin: 0px;
    background-color: Aqua;
}
.searchLabel
{
    float: left;
    margin-right: 0px;
    font: 13px Verdana;
    text-align: right;
    width: 50px;
    background-color: Blue;
    margin-top:15px;
    position: relative;
    left: 0px;
}
.textBoxes
{
    width: 120px;
    margin-top: 12px;
    position: relative;
    left: 0px;
    resize: none;
}

请求对齐:

    lblrefNo    txtRefNo               <!--CELL WIDTH -->
     lblFrom    txtFrom                <!--CELL WIDTH -->
       lblTo    txtTo                  <!--CELL WIDTH -->
       lblCc    txtCc                  <!--CELL WIDTH -->

IE(坏):

    lblrefNo            txtRefNo lblFrom    txtFrom <!--CELL WIDTH -->
    lblTo    txtTo lblCc    txtCc                   <!--CELL WIDTH -->

Chrome(坏):

    lblrefNo        txtRefNo lblFrom
    txtFrom lblTo
                        txtTo
    lblCc    txtCc

Answer 1

请尝试下面的 HTML

风格

.searchLabel
{
     display: block;
}
.textBoxes
{
     display: block;
}

HTML

<asp:TableCell ID="tc0" runat="server" CssClass="searchTableLabelsCell">
<div style="display:block; float: left; text-align: right;">
    <asp:Label ID="lblrefNo" runat="server" Text="RefNo:" CssClass="searchLabel">
    </asp:Label>
    <asp:Label ID="lblFrom" runat="server" Text="From:" CssClass="searchLabel">
    </asp:Label>
    <asp:Label ID="lblTo" runat="server" Text="To:" CssClass="searchLabel">
    </asp:Label>
    <asp:Label ID="lblCc" runat="server" Text="Cc:" CssClass="searchLabel">
    </asp:Label>
</div>
<div style="display:block; float: left; margin-left: 10px; text-align: left;">
    <asp:TextBox ID="txtRefNo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:TextBox ID="txtFrom" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:TextBox ID="txtTo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:TextBox ID="txtCc" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
</div>
</asp:TableCell>