在将样式应用于我的表单后,表单的某些元素并未特别遵循样式:

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

第二个问题:我在接合时在输入元素上应用图像以指示它们是必需的,但接合时该图像未出现在任何输入元素上。

第三问题:我希望带有social_sign_in类的div具有我已应用但无法正常工作的边距顶部。

第四期:我正在尝试使用表单样式,即我称之为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;
}

最佳答案

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


似乎并非如此……我看到所有输入都具有相同的长度。


  我在接合时在输入元素上应用图像以指示它们是必需的,但接合时该图像未出现在任何输入元素上。


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


  我希望带有social_sign_in类的div具有我已应用但无法正常工作的边距顶部。


它可以正常工作,但10px不足以看到区别。如果您将其设置为50像素,则会看到它已移动。


  我正在尝试使用表单样式,即我称为form_input_div的类将其自身包裹在宽度为350px的表单元素周围,同时仍保留在中间。这似乎不起作用。


form_input_div serve有什么目的?为什么不从输入中删除宽度,让它们占据其容器的100%(即表单),并在表单上设置一些宽度以得到所需的内容。

同样,required id也不是要放置在输入标签上的有效属性。

关于html - 令人惊讶的是,没有应用基本样式位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27878636/

10-12 12:28
查看更多