进一步说明

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

小提琴：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 。

Answer 2

您可以使用CSS定位属性完成此任务。

HTML

<!-- ADJUSTED BLOCK START -->
<label for="name" style="position: relative; width: 100%;">
   <span style="width: 24%; padding: 0; position: relative; left: -2%;">
       Type of Artwork</span>
   <span style="width: 24%; padding: 0; position: absolute; left: -2%; bottom: 30%;"
      class="label-sm">(i.e. sculpture, painting...)</span>
   <input style="width: 70%" type="text" name="name"
      required data-errormessage-value-missing="Please enter your item's type of artwork.">
</label>
<!-- ADJUSTED BLOCK END-->

DEMO

我使用内联样式以简洁明了。希望这会有所帮助。

Answer 3

这将嵌套两个<span>标记而不更改出现：

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

我不确定你想要实现的目标，所以不确定你的CSS是否需要一个小的改变，可能：

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

Answer 4

如果我说得对，这对您有用 - 只需将float: none;添加到#appraisals-form span.label-sm。

这是整个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;
    float: none;
}

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

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

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

希望它有所帮助：）

进一步说明

问题是由float: left; .contact-form label > span造成的，这种问题一般会影响您的范围。

Answer 5

最简单的方法是将此类添加到CSS：

label {float: left; width: 10em; margin-right: 1em; text-align: right;}

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

5 个答案:

进一步说明