Question

对不起，我对 CSS 非常陌生

我正在尝试将“工作”下的“低”对齐，但没有成功。任何人都可以建议我。请参考屏幕截图。enter image description here

Answer 1

.contact-form {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
    font-size: 20px;
}

.contact-form label {
    display: block;
    margin: 0px 0px 15px 0px;
    text-transform: uppercase; /* New */
}

.contact-form label > span {
    padding-top: 8px;
}

.contact-form label > span, #recaptcha::before {
    width: 100px;
    text-align: right;
    float: left;
    padding-right: 20px;
    content: "";
}

.contact-form input, .contact-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: none;
}

.contact-form input.input-field {
    width: 70%;
    height: 20px;
    font-size: 18px;
}

.contact-form .textarea-field {
    height: 250px;
    margin-bottom: 11px;
}

.contact-form .textarea-field, .g-recaptcha {
    width: 70%;
    font-size: 18px;
    display: inline-block;
}

.g-recaptcha {
    height: 78px !important;
}

#recaptcha {
    display: block;
    margin: 0px 0px 24px 0px;
}

textarea {
    resize: none;
}

textarea:focus, input:focus {
    outline: 0;
}

input.submit-button {
    background-image: url("../img/submit-button.jpg");
    width: 225px;
    height: 60px;
    border: none;
}

.appraisals .section-title {
    width: 100%;
}

#appraisals-form {
    width: 100%;
    max-width: 700px;
    top: auto;
    transform: none;
}

#appraisals-form label > span {
    width: 150px;
    font-size: 16px
}

#appraisals-form span.label-sm {
    display: block;
    font-size: 14px;
    text-transform: none;
}

#appraisals-form input, #appraisals-form textarea {
    background-color: #d7d7d7;
}

#appraisals-form textarea {
    height: 100px;
}

#appraisals-form .centred-button {
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="appraisals-form" class="contact-form">
<form role="form" method="post" action="contact-form.php">
    <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
    <label for="name"><span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork." /></label>

    <label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
    <div class="centred-button"><input type="submit" value="submit" class="submit-button" /></div>                  
</form>             
</div>
</body>
</html>

无法在其他标签下对齐标签

1 个答案: