asp.net - 文本框和标签位置问题

Question

我是 asp.net 的新手，遇到了一些小问题。问题是将Textbox和设置label在不同的位置，当我使用<br/>标签时，表单看起来很糟糕，我该如何解决流程？

代码是：

<tr>
        <td align="right" style="padding-right: 5px;" class="style6">
            <asp:Label ID="lblEmailId" runat="server" Text="EMAIL ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:"></asp:Label>
        </td>
        <td align="left" style="padding-left: 5px;" class="style6"> 
        <br/><br/><br/>
         <asp:TextBox ID="txtEmailId" runat="server" Width="70%" AutoCompleteType="Office"></asp:TextBox>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmailId"
                ErrorMessage="You can't leave this empty." Style="color: #FF0000;"></asp:RequiredFieldValidator>

            <asp:RegularExpressionValidator ID="rfvEmailId" runat="server" ControlToValidate="txtEmailId"
                ErrorMessage="Not a Valid Email Address" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                ValidationGroup="CreateUserWizard1" Style="color: #FF0000;" />&nbsp;<br />
            &nbsp;
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <br />
        </td>
    </tr>
    <tr>
        <td align="right" style="padding-right: 5px; " class="style6">
            <asp:Label ID="lblPhoneNo" runat="server" Text="PHONE NO.&nbsp;&nbsp;:"></asp:Label>
        </td>
        <td align="left" style="padding-left: 5px; " class="style6">
            <asp:TextBox ID="txtPhoneNo" runat="server" Width="70%" AutoCompleteType="Office"></asp:TextBox>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPhoneNo"
                ErrorMessage="You can't leave this empty." Style="color: #FF0000;"></asp:RequiredFieldValidator>

            <asp:RegularExpressionValidator ID="rfvPhoneNo" ControlToValidate="txtPhoneNo" ValidationExpression="\d{10}"
                ErrorMessage="The number must be 10 numeric digits!" runat="server" Style="color: #FF0000;" />
        </td>
    </tr>

请任何人都可以帮助我完成这个流程......，

Answer 1

在同一个<tr>元素中，将标签放在一个<td>中，将文本框放在另一个中，例如：

<table>
    <tr>
        <td>
        Name
        </td>
        <td>
        <asp:TextBox ID="txtName" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
        Surname
        </td>
        <td>
        <asp:TextBox ID="txtSurname" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
        Age
        </td>
        <td>
        <asp:TextBox ID="txtAge" runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: right;">
        <asp:Button ID="btnAdd" runat="server" Text="Add" /> 
        </td>
    </tr>
</table>

生成以下布局：

Answer 2

消除<br/><br/><br/>

真的，不要使用设计器进行布局！仅用于预览和添加新的自定义控件。

Answer 3

1. 摆脱<br />和 标签。

2. 设置RequiredFieldValidator和RegularExpressionValidator动态显示

   <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmailId"
           ErrorMessage="You can't leave this empty." Style="color: #FF0000;" Display="Dynamic"></asp:RequiredFieldValidator>
   <asp:RegularExpressionValidator ID="rfvEmailId" runat="server" ControlToValidate="txtEmailId"
           ErrorMessage="Not a Valid Email Address" SetFocusOnError="True" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
           ValidationGroup="CreateUserWizard1" Style="color: #FF0000;" Display="Dynamic"/>