0

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

页面：

<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 -->

铬（坏）：

    lblrefNo        txtRefNo lblFrom
    txtFrom lblTo
                        txtTo
    lblCc    txtCc
4

1 回答 1

2

请尝试以下 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>
于 2012-08-23T09:34:24.767 回答