Question

我想对齐ASP标签和textBoxes，但我在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>

使用CSS在表格中对齐ASP控件

1 个答案: