代码之家  ›  专栏  ›  技术社区  ›  Chris Hitchcock

表单中的中心输入[副本]

  •  -1
  • Chris Hitchcock  · 技术社区  · 8 年前

    这个问题已经有了答案:

    我看了很多其他的堆垛。我似乎和其他人有着同样的问题,但在我的生活中,按照他们的解决方案,我仍然无法将我的投入集中到中心。我尝试过选择窗体的子级,p元素的子级,使用跨度,然后直接选择输入。

    这是我的标记:

    .formFormat {
      line-height:20px !important;
      border-radius:10px !important;
      padding: 5px !important;
    	padding-left: 10px !important;
      background-color: transparent !important;
    	width: 80% !important;
    	margin-bottom:15px;
    }
    
    .formSubmit {
    	background-color: rgba(77,49,34,1)  !important;
    	width: 60%;
    	margin: auto !important;
    	border-radius:10px !important;
    	margin-left: auto !important;
    	margin-right: auto !important;
    }
    
    .formSubmit:hover {
    	background-color:#0472ff !important;
    }
    
    .wpcf7-form-control-wrap {
      margin-left:auto;
      margin-right:auto;
    }
    <form action="/contact/#wpcf7-f322-p135-o3" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
      <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="322" />
        <input type="hidden" name="_wpcf7_version" value="5.0.3" />
        <input type="hidden" name="_wpcf7_locale" value="en_US" />
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f322-p135-o3" />
        <input type="hidden" name="_wpcf7_container_post" value="135" />
      </div>
      <p>
        <span class="wpcf7-form-control-wrap FirstName">
          <input type="text" name="FirstName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="First Name (required)" />
        </span><br />
        <span class="wpcf7-form-control-wrap LastName">
          <input type="text" name="LastName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Last Name (required)" />
        </span><br />
        <span class="wpcf7-form-control-wrap Telephone">
          <input type="text" name="Telephone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Telephone (required)" />
        </span><br />
    <span class="wpcf7-form-control-wrap Email">
      <input type="email" name="Email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email formFormat" aria-required="true" aria-invalid="false" placeholder="Email (required)" />
        </span><br />
        <label>Applying For (required)<br />
          <span class="wpcf7-form-control-wrap ApplyingFor">
            <select name="ApplyingFor" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false">
              <option value="Pilot">Pilot</option>
              <option value="Mechanic">Mechanic</option>
            </select>
          </span>
        </label><br />
        <span class="wpcf7-form-control-wrap Message">
          <textarea name="Message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Leave us a message! (required)">
          </textarea>
        </span><br />
        <span class="wpcf7-form-control-wrap Resume"><input type="file" name="Resume" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required formFormat" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-required="true" aria-invalid="false" />
        </span><br />
        <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit formSubmit" />
      </p>
      <div class="wpcf7-response-output wpcf7-display-none">
      </div>
    </form>

    我知道提交按钮显示不正确。现在不担心。

    感谢您的帮助。已经花了一个多小时的时间试图弄清楚这一点,但都无济于事。

    这里有一个 codepen 也。

    1 回复  |  直到 8 年前
        1
  •  0
  •   Coral Kashri    8 年前

    .formFormat {
      line-height:20px !important;
      border-radius:10px !important;
      padding: 5px !important;
    	padding-left: 10px !important;
      background-color: transparent !important;
    	width: 80% !important;
    	margin-bottom:15px;
    }
    
    .formSubmit {
    	background-color: rgba(77,49,34,1)  !important;
    	width: 60%;
    	margin: auto !important;
    	border-radius:10px !important;
    	margin-left: auto !important;
    	margin-right: auto !important;
    }
    
    .formSubmit:hover {
    	background-color:#0472ff !important;
    }
    
    .wpcf7-form-control-wrap {
      margin-left:auto;
      margin-right:auto;
    }
    
    form, form input {
      text-align: center;
    }
    <form action="/contact/#wpcf7-f322-p135-o3" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
      <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="322" />
        <input type="hidden" name="_wpcf7_version" value="5.0.3" />
        <input type="hidden" name="_wpcf7_locale" value="en_US" />
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f322-p135-o3" />
        <input type="hidden" name="_wpcf7_container_post" value="135" />
      </div>
      <p>
        <span class="wpcf7-form-control-wrap FirstName">
          <input type="text" name="FirstName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="First Name (required)" />
        </span><br />
        <span class="wpcf7-form-control-wrap LastName">
          <input type="text" name="LastName" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Last Name (required)" />
        </span><br />
        <span class="wpcf7-form-control-wrap Telephone">
          <input type="text" name="Telephone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Telephone (required)" />
        </span><br />
    <span class="wpcf7-form-control-wrap Email">
      <input type="email" name="Email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email formFormat" aria-required="true" aria-invalid="false" placeholder="Email (required)" />
        </span><br />
        <label>Applying For (required)<br />
          <span class="wpcf7-form-control-wrap ApplyingFor">
            <select name="ApplyingFor" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false">
              <option value="Pilot">Pilot</option>
              <option value="Mechanic">Mechanic</option>
            </select>
          </span>
        </label><br />
        <span class="wpcf7-form-control-wrap Message">
          <textarea name="Message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required formFormat" aria-required="true" aria-invalid="false" placeholder="Leave us a message! (required)">
          </textarea>
        </span><br />
        <span class="wpcf7-form-control-wrap Resume"><input type="file" name="Resume" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required formFormat" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-required="true" aria-invalid="false" />
        </span><br />
        <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit formSubmit" />
      </p>
      <div class="wpcf7-response-output wpcf7-display-none">
      </div>
    </form>