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

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

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>

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

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

    lblrefNo        txtRefNo lblFrom
    txtFrom lblTo
                        txtTo
    lblCc    txtCc

请求的对齐：

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

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

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

    lblrefNo        txtRefNo lblFrom
    txtFrom lblTo
                        txtTo
    lblCc    txtCc

---

请尝试下面的HTML

风格

HTML

-1，但并不是每个开发人员生来就有css-egg-shell。为什么它被分成两个div？是否可以用一个div来完成，让标签和文本框保持在一起？如果我们将它放在一个div中，那么它看起来就像问题中给出的最后一个对齐选项（chromebad）。因为span不是块元素。如果应用display:block将文本框和标签保持在一起，则文本框将显示在标签下方。我希望您知道标签被渲染为span。