textbox and label position issue [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

I am new to asp.net and facing some small problem in it. Problem is to set the Textbox and label are in different position and while I use the <br/> tag the form is looking very bad how can I resolve the flow?

code is:

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

plz can any one help me on this flow...,

回答1:

1. get rid of <br /> and   tags.

2. set the RequiredFieldValidator and RegularExpressionValidator to dynamically display

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

回答2:

Within the same <tr> element place the label in one <td> and the text box in the other e.g:

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

Produces the following layout:

回答3:

Remove <br/><br/><br/>

And really, DON'T use designer for layout! Use it only for preview and adding new custom controls.

来源：https://stackoverflow.com/questions/15827979/textbox-and-label-position-issue