html - CSS以不同方式定位具有相同类的两个元素

Question

我有一个网络表单，显示两个输入字段(用户名和密码)。输入字段被标记，标签有自己的 <div class>在 HTML 中:

<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 类，并且显示为同一表单的一部分，但当我在浏览器中查看页面时，出于某种原因，一个标签比另一个缩进得更远:

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

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>