增加表单框之间的填充

Question

我正在尝试将输入框之间的 space 增加 48 像素。这似乎是一个简单的修复；但是我无法让输入框移动。如果有人可以帮我解决这个问题，我将不胜感激！

    <form class="container"
        action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
        method="POST">
        <label>First Name <input id="first_name" maxlength="40"
            name="first_name" size="20" type="text" onkeyup="test()" required><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label>Last Name <input id="last_name" maxlength="80"
            name="last_name" size="20" type="text" onkeyup="test()"><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label>Email <span class="error">Please enter a valid
                email address</span> <input id="email" maxlength="80" name="email" size="20"
            type="text" onkeyup="test()"><i class="fa fa-times-circle-o"
            aria-hidden="true"></i>
        </label> <label>Phone <span class="error">Please enter a valid
                phone number</span> <input id="phone" maxlength="80" name="phone" size="20"
            type="tel" onkeyup="test()"><i class="fa fa-check-circle"
            aria-hidden="true"></i>
        </label> <label>City <input id="city" name="city" maxlength="40"
            size="20" type="text" onkeyup="test()"><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label>State/Province <input id="state" maxlength="20"
            name="state" size="20" type="text" onkeyup="test()"><i
            class="fa fa-check-circle" aria-hidden="true"></i>
        </label> <label id="co">Company <input id="company" name="company"
            type="text" onkeyup="test()"><i class="fa fa-check-circle"
            aria-hidden="true"></i>
        </label> <label>Comments <textarea id="comments" name="" id=""
                cols="30" rows="10" onkeyup="test()"></textarea> <input id="sub"
            type="submit" disabled="disabled" />
        </label>

        <div>
            <select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN"
                title="Product Interest">
                <option value="">--None--</option>
                <option selected="selected" value="Visiant">Visiant</option>
                <option value="Tessellate">Tessellate</option>
            </select><br> <select hidden="true" id="lead_source" name="lead_source">
                <option value="">--None--</option>
                <option value="Internal">Internal</option>
                <option value="Trade Show">Trade Show</option>
                <option selected="selected" value="Website">Website</option>
                <option value="Direct Marketing">Direct Marketing</option>
                <option value="Social Media">Social Media</option>
                <option value="Other">Other</option>
            </select><br>
        </div>
    </form>

    body {
      color: #fff;
      background-color: #30bda6;
      text-align: center;
    }

    form {
      color: #fff;
      background-color: #30bda6;
      text-align: center;
      font-family: Lato;
    }

    * {
      box-sizing: border-box;
    }

    .form-title {
      font-size: 38px;
      color: #fff;
      font-family: "Lato";
      letter-spacing: 70px;
    }

    input {
      font-size: 15px;
      height: 48px;
      margin-top: 8px;
    }

    input[type="tel"] {
      width: 100%;
      padding: 10px;
      background-color: #30bda6;
      border: 1px solid #fff;
      font-size: 15px;
      height: 48px;
    }
    input[type="text"] {
      width: 100%;
      padding: 10px;
      background-color: #30bda6;
      border: 1px solid #fff;
      font-size: 15px;
    }

    input:focus {
      background-color: #fff;
    }


    input[type="text"]:focus {
      background-color: #fff;
    }

    input[type="text"]:visited {
      background-color: #fff;
    }

    input[type="tel"]:focus {
      background-color: #fff;
    }

    input[type="tel"]:visited {
      background-color: #fff;
    }

    .container {
      display: flex;
      flex-direction: column;
      padding: 5px 0;
    }

    textarea {
      width: 100%;
      background-color: #30bda6;
      border: 1px solid #fff;
    }

    textarea:focus {
      background-color: #fff;
    }

    #co {
      flex-basis: 100%;
      max-width: 100%;
    }

    label:nth-last-child(-n+2) {
      flex-basis: 100%;
      max-width: 100%;
    }

    select,
    label {
      height: 50px;
      width: 48%;
      margin: 2% 1%;
      text-align: left;
      font-family: "Lato";
      font-size: 15px;
    }

    #sub {
      border-radius: 6px;
      width: 120px;
      height: 35px;
      text-transform: uppercase;
      display: block;
      margin-top: 48px;
      font-size: 16px;
      border: none;
    }

    #sub2 {
      border-radius: 6px;
      width: 120px;
      height: 35px;
      text-transform: uppercase;
      display: block;
      margin-top: 48px;
      font-size: 16px;
      border: none;
    }


    label {
      position: relative;
    }

    .fa {
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(-50%, 65%);
      opacity: 0;
      transition: opacity .5s, color .5s;
    }

    [data-valid] .fa {
      opacity: 1;
      color: #00594C;
    }

    [data-valid="valid"] .fa {
      color: #00594C;
    }

    [data-valid="error"] .fa {
      color: #AB0000;
    }

    .error {
      display: none;
      color: #AB0000;
      font-size: .7em;
      position: absolute;
      left: 10px;
      top: 0;
      transform: translateY(150%);
      font-size: 12px;
      margin-top: 2px;
    }

    [data-valid="error"] .error {
      display: block;
    }

    input#sub2:not([disabled]){
        background-color: #fff;
        color:  #00AB8E;
    }

    input#sub:not([disabled]){
        background-color: #fff;
        color: #F68D2E;;
    }


    #thankyou { display:none;}

    #thankyou.success { 
        display: block;
        text-align: center;
    }

    #tessellate-page input:focus {
        background-color: #fff !important;;
    }

    #tessellate-page textarea:focus {
        background-color: #fff !important;;
    }

    #tessellate-page input[type="text"] {
      width: 100%;
      padding: 10px;
      background-color: #30bda6;
      border: 1px solid #fff;
    }

    #comments_label {
        margin-top: 8px;
    }


    @media (max-width: 656px) {
      label {
        width: 98%;
        height: 70px;
      }

       .fa {
        transform: translate(-50%, -45%);
      }
    }

    @media (min-width: 656px) {
      .container {
        flex-direction: row;
        flex-wrap: wrap;
        align-self: flex-start;
      }

      label {
        margin-bottom: 20px;

      }


    }

    function phoneNumber(phone)  {  
      var phoneno = /^\d{9}|\d{10}|\d{11}$/;  
      return phoneno.test(phone);
    }

    $('input[type="tel"]').on('keyup', function() {
      var $label = $(this).closest('label');
      if ($(this).val().trim() != '') {
        if ($(this).is('#phone')) {
          if (phoneNumber($(this).val())) {
            $label.attr('data-valid', 'valid');
          } else {
            $label.attr('data-valid', 'error');
            console.log("this works")
          }
        } else {
          $label.attr('data-valid', 'valid');
          console.log("this works")
        }
      } else {
        $label.removeAttr('data-valid');
        console.log("this works")

      }
    });


    function validateEmail(email) {
      var re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }

    $('input[type="text"]').on('keyup', function() {
      var $label = $(this).closest('label');
      if ($(this).val().trim() != '') {
        if ($(this).is('#email')) {
          if (validateEmail($(this).val())) {
            $label.attr('data-valid', 'valid');
          } else {
            $label.attr('data-valid', 'error');
            console.log("this works")
          }
        } else {
          $label.attr('data-valid', 'valid');
          console.log("this works")
        }
      } else {
        $label.removeAttr('data-valid');
        console.log("this works")

      }
    });


    test = function() {
      if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) {
        $("#sub").removeAttr("disabled");
      }
    }

Answer 1

将以下 css 添加到您的代码中。

select, label{
  height: auto;
}

Answer 2

只需删除标签 CSS，并将其放在 CSS 代码的末尾：

label{
    margin-bottom: 20px;
}

或者如果你想要更多 space：

label{
    margin-bottom: 48px;
}

这是fiddle：http://jsfiddle.net/M6N24/535/

增加表单框之间的填充

Increase padding between form boxes

html

css

forms

margins

padding