将复选框与样式的其余部分对齐/样式复选框

Question

我正在尝试使用我的表单的其余部分对齐和设置一组复选框，但我没有太多经验样式表单。我正在努力分别引用图例，标签和输入框。我看过用不同标记构建的复选框，所以我不确定是否有更好的方法来实现这一点。

预期的布局/风格：

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="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>

        <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist."></label>

        <label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title."></label>

        <label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." /></label>

        <label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age."></label>

        <label for="condition"><span>Condition</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>

        <label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>

        <label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>

        <label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>

        <label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>

        <fieldset>
            <legend>Type of Appraisal</legend>
            <input type="checkbox" name="app-type" value="Insurance" />Insurance
            <input type="checkbox" name="app-type" value="Donation" />Donation
            <input type="checkbox" name="app-type" value="General Estate Planning" />General Estate Planning
        </fieldset>

        <div class="centred-button"><input type="submit" value="" class="submit-button" /></div>                  
    </form>             
</div>

CSS：

.contact-form {
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    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, .contact-form fieldset {
    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;
}

.contact-form fieldset { /* New */
    font-size: 16px;
}

.contact-form legend { /* New */
    width: 150px;
    text-align: right;
    float: left;
    padding-right: 20px;
    content: "";
    text-transform: uppercase;
}

.contact-form fieldset input { /* New */
    margin-right: 10px;
    text-align: left;
}

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

小提琴：http://jsfiddle.net/trqgos4q/。

任何帮助都会非常感激！

Answer 1

看起来您使用的是固定布局，因此我在第一个输入中添加了一个边距，并将box-sizing: border-box添加到您的评估标签中，以便它不再将输入标签推向右侧

这些更改使复选框按照您要查找的方式对齐。

以下是相关的CSS：

#appraisalTypeWrap > legend {
    box-sizing: border-box;
}

#appraisalTypeWrap > input:first-of-type {
    margin-left: 10px;
}

我给出了＆＃34;评估类型＆＃34; fieldset appraisalTypeWrap id，以便这个CSS的目标。

使用JSFiddle：http://jsfiddle.net/trqgos4q/2/

Answer 2

我现在可以为你做的最好..但你应该重写你的HTML;） （我也没有改变任何HTML代码..）

＆＃13;

＆＃13;

#appraisals-form {
  width: 650px;
}
label {
  display: block;
}
label > span:first-child {
  display: block;
  float: left;
  width: 150px
}
label > span:nth-child(2) {
  display: block;
  float: right;
}
label textarea,
label input {
  width: 180px;
}

＆＃13;

<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="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork.">
    </label>

    <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist.">
    </label>

    <label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title.">
    </label>

    <label for="measurements"><span>Measurements</span>
      <input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." />
    </label>

    <label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span>
      <input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age.">
    </label>

    <label for="condition"><span>Condition</span>
      <textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea>
    </label>

    <label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea>
    </label>

    <label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea>
    </label>

    <label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea>
    </label>

    <label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span>
      <textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea>
    </label>

    <fieldset>
      <legend>Type of Appraisal</legend>
      <input type="checkbox" name="app-type" value="Insurance" />Insurance
      <input type="checkbox" name="app-type" value="Donation" />Donation
      <input type="checkbox" name="app-type" value="General Estate Planning" />General Estate Planning
    </fieldset>

    <div class="centred-button">
      <input type="submit" value="" class="submit-button" />
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;