html - 基本样式位令人惊讶地没有被应用

Question

将样式应用到我的表单后，表单的某些元素并没有特别遵守样式:

第一个问题:350px 的宽度仅应用于五个输入元素之一，即电子邮件字段。

第二个问题:我在参与时在输入元素上应用图像以指示它们是必需的，但图像在参与时没有出现在任何输入元素上。

第 3 期:我希望带有 social_sign_in 类的 div 有一个边距顶部，我已经应用但不起作用。

第 4 个问题:我正在尝试设置表单样式，即我调用 form_input_div 的类将其自身包裹在宽度为 350px 的表单元素周围，同时它仍位于中心。这似乎不起作用。

作为 CSS 的新手，我怀疑我可能在样式的基础知识上犯了一些错误，如果是这样，我深表歉意。

编辑:这是相关的 HTML 代码:

<div class="page_content_main_div">

        <div class="page_content_heading_div" >
            <p> Log in with: </p>
        </div>

        <div class="social_sign_in_div">
            <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
        </div>

        <div class="social_sign_in_div">
            <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
        </div>

        <div class="btn_log_in_with_email_div">
            <a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>ABCD details</b></a>
        </div>

    <hr class="hr"></hr>

    <form action="#" method="GET" class="sign_up_form">
        <div class="page_content_heading_div">
            <p>Sign up:</p>
        </div>                

        <div>
            <input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
        </div>

        <div>
            <input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
        </div>

        <div>
            <input title="Enter your e-mail" class="email" name="email" type="email" required placeholder="Enter email">
        </div>

        <div>
            <input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
        </div>

        <div>
            <input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
        </div>

        <div class="form_button_internal_div">
            <button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
        </div>

        <div class="form_terms_of_service_internal_div">
            <p class="terms_of_service">By signing up, I agree to the ABCD <a href='#' id="generic_link_decoration"><b>Terms of Service</b></a> and <a href='#' id="generic_link_decoration"><b>Privacy Policy</b></a>.</p>
        </div>                                

    </form>

</div>

编辑:这是相关的 CSS 代码:

/* Page content heading div */
.page_content_heading_div {
    font-family:'Trebuchet MS', Tahoma, Sans-serif; 
    color: #999999;
    font-size: 40px;
    font-weight: bold;
    clear: both;    
}

/* Page content main div */
.page_content_main_div {
    clear: both;

}

/* Social sign in div */
.social_sign_in_div {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;     
    clear: both;
    margin-top: 10px;
}

/* Log in with email div */
.btn_log_in_with_email_div {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;     
    clear: both;
    margin-top: 10px;
}

/* hr styling */
.hr {
    width: 350px;
    height: 2px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
}

/* */
.sign_up_form {
    width: 350px;
    display: inline-block;    
}

/* */
input[type="text"], input[type="password"], input[type="email"] {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    width: 100%;
    height: 45px;
    font-size: 20px;
    color: #000000;
    border: 1px solid #999999;
    border-radius: 6px;
    padding: 5px 5px 5px 5px;
    margin-top: 10px;

    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;    
}

/* */
input:focus {
    outline: solid #999999;
    border-radius: 6px;    
}

/* */
.form_button_internal_div { 
    margin-top: 10px;
    margin-bottom: 10px;     
}

/* Primary button */
.btn_sign_up {
    right: 0px;
    width: 150px;  
    height: 36px;
    border:none;
    font-weight: normal;
    font-size: 20px;  
    margin-top: 10px;

    background: #CCC;
    background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
    -pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);

    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;

    -webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
    -moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
    box-shadow: inset 1px 0 0px rgba(255,255,255,.4);

    color: #F5F5F5;
}

/* */
.btn_sign_up:hover {
    background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    -pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}

/* */
.btn_sign_up:active {
    background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
    -pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}

/* */
.form_terms_of_service_internal_div { 
    margin-top: 10px;
    margin-bottom: 10px;     
}

/* */
.terms_of_service {
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    font-size: 15px;
    color: #999999;
}

Answer 1

The width of 350px is only being applied on one of the five input elements i.e. the email field.

这似乎不是真的...我看到所有输入的长度都相同。

I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.

您参与的输入由 required 类标识，但默认情况下它们都具有此类，因此实际上没有触发器。您正在寻找的是 :focus，然后应用样式。

I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.

它可以工作，但 10px 不足以看出差异。如果你把它设为 50px，你会看到它移动了。

I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.

form_input_div 的作用是什么？为什么不从输入中删除宽度，让它们占据 100% 的容器，即表单，并在表单上设置宽度并加上一些填充，这样你就会得到你想要的。

另外，required id 不是放置在输入标签上的有效属性。