Question

我有一个Web表单，显示两个输入字段（用户名和密码）。输入字段带有标签，并且标签在HTML中具有自己的<div class>：

<h2>Sign in to your account</h2>
<asp:RequiredFieldValidator ID="Req1" ValidationGroup="loginpage" ControlToValidate="UserName" runat="server" CssClass="loginerror" ErrorMessage="Please enter your username or email address" /><br />
<div class="fieldLabel">
    <asp:Label ID="UserNameLabel" Text="Username/Email" runat="server" />
</div>

<asp:TextBox ID="UserName" CssClass="id" ValidationGroup="loginpage" autocomplete="off" runat="server" /><br />
<div class="fieldLabel">
    <asp:Label ID="PasswordLabel" CssClass="fieldLabel" Text="Password" runat="server" /><br />
</div>
<asp:TextBox ID="Password" ValidationGroup="loginpage" autocomplete="off" TextMode="Password" runat="server" /><br />
<asp:RequiredFieldValidator ID="Req2" ValidationGroup="loginpage" ControlToValidate="Password" runat="server" CssClass="loginerror" ErrorMessage="Please enter your password" /><br />

但是，尽管具有相同的CSS类，但两个标签在表单上的位置却显示不同-一个缩进比另一个缩进...

在site.css文件中，我具有以下内容：

.loginarea .greyblock {
    background-image: url(../images/bg.gif);
    border: 1px solid #efefef;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    background-repeat: repeat;
    padding: 30px;
    text-align: center;
}

    .loginarea .greyblock .fieldLabel {
        width: 300px;
        text-align: left;
        font-weight: 700;
        padding: 0px 60px;
    }

但是，尽管这两个标签都应用了相同的CSS类，并且以相同形式显示，但由于某种原因，当我在浏览器中查看页面时，一个标签比另一个标签缩进更多：< / p>

这是为什么，如何解决它，以便相对于输入字段的左侧显示标签？

Answer 1

您的PasswordLabel具有cssClass="fieldLabel"以及父div。您是否尝试过将其从Label中删除？

<div class="fieldLabel">
    <asp:Label ID="PasswordLabel" CssClass="fieldLabel" Text="Password" runat="server" /><br />
</div>

到

<div class="fieldLabel">
    <asp:Label ID="PasswordLabel" Text="Password" runat="server" /><br />
</div>

CSS对相同类的两个元素的定位不同

1 个答案: