asp.net标签和asp.net文本框没有正确排队?

时间:2010-06-15 19:04:56

标签: asp.net css

我的注册页面目前如下所示: alt text http://img691.imageshack.us/img691/4033/currento.png

我对上面的图像的当前样式是:

<style type="text/css">
#contactinfo label
{
    float: left;
    width: 10em;
    margin-right: 0.5em;
    text-align: right;
    font-size: 14px;
}

#contactinfo p
{
    padding: 5px;
}
#contactinfo input[type="text"], input[type="password"]
{
    height: 1.5em;
}
#contactinfo select
{
    padding: 0.25em;
}
#contactinfo input[type="text"]:focus, input[type="password"]:focus
{
    background-color: #FFFFE0;
}

#contactinfo .update
{
    margin-left: 12.5em;
}
#contactinfo .error
{
    background-color: transparent;
}
#contactinfo .longtextbox
{
    width: 20em;
}
#contactinfo .shorttextbox
{
    width: 5em;
}
</style>

,标记为

<div id="contactinfo">
<p>
    <asp:Label runat="server"  
               AssociatedControlID="txtEmail">Email
    </asp:Label>
    <asp:TextBox ID="txtEmail" 
                 runat="server" 
                 CssClass="longtextbox" />
</p>
<p>
    <asp:Label runat="server" 
               AssociatedControlID="txtFirstName">First Name
    </asp:Label>
    <asp:TextBox ID="txtFirstName" 
                 runat="server" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtFirstName" 
                                Text="First Name is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server" 
               AssociatedControlID="txtLastName">Last Name
    </asp:Label>
    <asp:TextBox ID="txtLastName" 
                 runat="server" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtLastName" 
                                Text="Last Name is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server" 
               AssociatedControlID="txtBusinessName">Business Name
    </asp:Label>
    <asp:TextBox ID="txtBusinessName" 
                 runat="server" 
                 CssClass="longtextbox" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtBusinessName" 
                                Text="Business Name is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server"  
               AssociatedControlID="txtPhone">Phone
    </asp:Label>
    <asp:TextBox ID="txtPhone" 
                 runat="server" 
                 ValidationGroup="AccountValidation" />
    </p>
    <p>
    <asp:Label runat="server"  
               AssociatedControlID="txtAddress">Address
    </asp:Label>
    <asp:TextBox ID="txtAddress" 
                 runat="server" 
                 CssClass="longtextbox" 
                 ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator runat="server" 
                                ControlToValidate="txtAddress" 
                                Text="Address is required."
                                ValidationGroup="AccountValidation"  
                                CssClass="error"></asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server"  
               AssociatedControlID="txtCity">City
    </asp:Label><asp:TextBox ID="txtCity" 
                             runat="server" 
                             ValidationGroup="AccountValidation" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4"
            runat="server"
            ControlToValidate="txtCity" 
            Text="City is required."
            ValidationGroup="AccountValidation" 
            CssClass="error">
    </asp:RequiredFieldValidator>
    </p>
    <p>
    <asp:Label runat="server" 
               AssociatedControlID="ddlState">State
    </asp:Label>
    <asp:DropDownList ID="ddlState" 
                      runat="server" 
                      DataSourceID="dsStates"  
                      DataTextField="Name"
                      DataValueField="Id">
    </asp:DropDownList>
    </p>
    <p>
    <asp:Label runat="server"                   
               AssociatedControlID="txtZipcode">Zipcode</asp:Label>
               <asp:TextBox ID="txtZipCode" runat="server" CssClass="shorttextbox"  
               ValidationGroup="AccountValidation" />

    </p>
    </div>

正如您从上面所看到的,我将每个标签字段对包装在一个p标签中,因此它会断开到下一行,但我不确定是否需要这样做。我希望将city,state和zip全部放在同一行,但是只要我将所有标签和输入移动到city,state,zip到一个p标签,它就像下面的那样,我不知道如何解决它。

alt text http://img36.imageshack.us/img36/6417/wantedfn.png

2 个答案:

答案 0 :(得分:0)

  

编辑:尝试将其用作cssclass   那些标签 -

#contactinfo noformatlabel 
     { 
      //add here if you need to adjust the spacing..but dont float add padding or                    //something else.. 
     padding:0.2em //maybe this if needed for formatting..
      }

我认为 -

#contactinfo label
{
    float: left;
    width: 10em;
    margin-right: 0.5em;
    text-align: right;
    font-size: 14px;
}

这些css属性是一个问题...为城市州和邮政编码的标签做一个不同类型的CSS ...我的意思是尝试它没有任何格式......它可能会工作...

答案 1 :(得分:0)

您可能会浮动这三个输入以及标签。或者停止浮动标签,因为宽度不像现在那样重要。