html - 将多个标签对齐到表单输入的左侧

Question

我正在尝试堆叠两个 <span>表单输入标签中的标签。此刻，他们坐在一起，但我不确定如何移动span.label-sm在常规跨度下。我已经将它设置为 display: block; .

期望的结果:http://i.imgur.com/CkOKeWl.jpg .

HTML:

<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="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
        <label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></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="" class="submit-button" /></div>                  
    </form>             
</div>

CSS:

.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;
}

fiddle :http://jsfiddle.net/tcap2Lcp/ .

非常感谢任何帮助!

Answer 1

作为我第一个答案的替代方案，它使用 CSS 定位属性和宽度调整来对齐输入左侧的标签，此解决方案仅使用 HTML 使事情非常简单。

想法是将小标签显示为 placeholder 文本。

这个元素被删除了:

<span class="label-sm">(i.e. sculpture, painting...)</span>

但文本进入占位符:

<label for="name">
    <span>Type of Artwork</span>
    <input type="text" class="input-field" name="name" required 
    data-errormessage-value-missing="Please enter your item's type of artwork."
    placeholder="(i.e. sculpture, painting...)" >
</label>

就是这样!

干净、简单、可重用的代码(按照您的要求)。易于维护。方便使用的。并且没有更改 CSS ...除非您决定要 style the placeholder text .