我的注册页面目前看起来如下: alt text http://img691.imageshack.us/img691/4033/currento.pngasp.net标签和asp.net文本框不正确排队?
目前的造型我对上面的图像是:
<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>
,你可以从上面看,我将每个标签字段对都包裹在ap标签中,因此它打破了下一行,但我不确定是否需要这样做。我希望将城市,州和邮政编码都放在同一行,但只要将城市,州,邮编的所有标签和输入移动到一个p标签中,就会看起来像下面这样,但我不知道要解决这个问题。
alt text http://img36.imageshack.us/img36/6417/wantedfn.png
是的。我认为这是问题,但我不知道我该怎么做。我在CSS中不太好。我已经尝试过改变属性,但放弃了,因为我似乎在打败一场失败的战斗。 – Xaisoft 2010-06-15 19:45:36
看看我的更新回应是否有帮助.. – Vishal 2010-06-15 19:57:24
好的,我创建了另一个类,就像你说的.noformatlabel,我添加了以下属性: display:inline; font-size:14px; margin-right:0.5em; text-align:right; 我也在p标签上放了一个margin-left:8.5em,这样它的城市就会与其他标签对齐。起初,这似乎并不奏效,因为它是从其他标签样式继承而来的,我给了它一个格式标签的名称,现在一切看起来都很好。感谢您的正确方向。 – Xaisoft 2010-06-15 21:20:50