html - 对齐我的输入字段-6ren

html - 对齐我的输入字段

转载作者：行者123 更新时间：2023-11-28 04:08:22

我想让左边的输入字段水平对齐而不影响边距。我将边距设置为 0，以便表单始终位于页面的中央。您是否也可以使主题和文本区域也相互对齐。因为根本不同步

body {
  font-size: 100%;
}

h1 {
  text-align: center;
  font-size: 2.3em;
  /*1em = 16px.*/
}


/*OVERALL FORM EDITING*/

form {
  margin: auto;
  /*used to center the form*/
  width: 700px;
  /*prevents the form from stretching over the whole page*/
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  padding: 20px;
  /*pads the inside of the form*/
  font-size: 0.875em;
  /*1em = 16px.*/
}


/*OVERALL FORM EDITING*/

.center-element {
  text-align: center;
}

.float-right {
  float: right;
}


/*position input fields to the right on the form*/


/*INPUT FIELDS*/

input[type="text"] {
  /*controls the size, color, e.t.c for the input "text" fields */
  border-radius: 7px;
  border: 2px solid #f4511e;
  padding: 6px;
  box-sizing: border-box;
  outline: none;
  display: inline-block;
  width: 190px;
}

input[type="text"]:focus {
  /*for the color inside the input "text" fields when clicked*/
  background-color: #9BDFE4;
}

input[type="number"] {
  /*controls the size, color, e.t.c for the input "number" fields */
  display: inline-block;
  /*allows our elements to have a width and a height.*/
  border-radius: 7px;
  border: 2px solid #F28C6D;
  padding: 6px;
  box-sizing: border-box;
  outline: none;
  width: 190px;
  /*used to specify the size of the input fields*/
}

input[type="number"]:focus {
  /*for the color inside the input "number" fields when clicked*/
  background-color: #9BDFE4;
}


/*INPUT FIELDS*/


/*BUTTONS*/

#submit-form-button {
  /*for the "Get Started" button*/
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  color: #FFFFFF;
  background-color: #F28C6D;
  cursor: pointer;
  outline: none;
}

#submit-form-button:hover {
  /*controls the color of the "Get Started" button when you hover over it*/
  background-color: #EB4408;
}

#reset-button {
  /*for the "Clear form" button*/
  border-radius: 50px;
  cursor: pointer;
  color: #FFFFFF;
  background-color: #9BDFE4;
  float: right;
  outline: none;
}

#reset-button:hover {
  /*controls the color of the "Clear form" button when you hover over it*/
  background-color: #0066CC;
}


/*BUTTONS*/


/*DROPDOWN MENUS*/

#dropForm {
  display: inline-block;
  /*allows our elements to have a width and a height.*/
  border-radius: 7px;
  border: 2px solid #f4511e;
  padding: 6px;
  box-sizing: border-box;
  outline: none;
  width: 190px;
  /*used to specify the size of the input fields*/
}


/*DROPDOWN MENUS*/


/*TEXT AREA BOX & SUBJECT AREA BOX*/

#sub {
  width: 390px;
  padding: 12px;
}

#notePad {
  border-radius: 7px;
  border: 2px solid #f4511e;
  padding: 12px;
  outline: none;
  resize: none;
  box-sizing: border-box;
}

#notePad:focus {
  background-color: #9BDFE4;
}


/*TEXT AREA BOX & SUBJECT BOX AREA*/

<form>


  <div id="aligning-input-fields">
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" required/>

    <div class="float-right">
      <label for="lastname">Last Name:</label>
      <input type="text" name="lastname" required/>
    </div>

    <br />
    <br />

    <label for="email-1">Enter your e-mail:</label>
    <input type="text" name="email-1" required/>

    <div class="float-right">
      <label for="email-2">Confirm your email:</label>
      <input type="text" name="email-2" required/>
    </div>

    <br />
    <br />

    <label for="drop1">Country:</label>
    <select name="drop1" id="dropForm">
                            <option value="au">Australia</option>
                            <option value="al">Albania</option>
                            <option value="dz">Algeria</option>
                            <option value="ao">Angola</option>
                            <option value="ai">Anguilla</option>
                            <option value="ag">Antigua and Barbuda</option>
                            <option value="ar">Argentina</option>
                            <option value="am">Armenia</option>
                            <option value="aw">Aruba</option>
                            <option value="at">Austria</option>
                            <option value="az">Azerbaijan</option>
                            <option value="bs">Bahamas</option>
                            <option value="bh">Bahrain</option>
                            <option value="bd">Bangladesh</option>
                            <option value="bb">Barbados</option>
                            <option value="by">Belarus</option>
                            <option value="be">Belgium</option>
                            <option value="bz">Belize</option>
                            <option value="bj">Benin</option>
                            <option value="bm">Bermuda</option>
                            <option value="bt">Bhutan</option>
                            <option value="bo">Bolivia</option>
                            <option value="ba">Bosnia and Herzegovina</option>
                            <option value="bw">Botswana</option>
                            <option value="br">Brazil</option>
                            <option value="vg">British Virgin Islands</option>
                            <option value="bn">Brunei</option>
                            <option value="bg">Bulgaria</option>
                            <option value="bf">Burkina Faso</option>
                            <option value="ca">Canada</option>
                            <option value="kh">Cambodia</option>
                            <option value="cm">Cameroon</option>
                            <option value="cv">Cape Verde</option>
                            <option value="ky">Cayman Islands</option>
                            <option value="td">Chad</option>
                            <option value="cl">Chile</option>
                            <option value="cn">China</option>
                            <option value="co">Colombia</option>
                            <option value="cr">Costa Rica</option>
                            <option value="hr">Croatia</option>
                            <option value="cy">Cyprus</option>
                            <option value="cz">Czech Republic</option>
                            <option value="ci">Côte d&#39;Ivoire</option>
                            <option value="dk">Denmark</option>
                            <option value="dm">Dominica</option>
                            <option value="do">Dominican Republic</option>
                            <option value="ec">Ecuador</option>
                            <option value="eg">Egypt</option>
                            <option value="sv">El Salvador</option>
                            <option value="ee">Estonia</option>
                            <option value="fj">Fiji</option>
                            <option value="fi">Finland</option>
                            <option value="fr">France</option>
                            <option value="ga">Gabon</option>
                            <option value="gm">Gambia</option>
                            <option value="de">Germany</option>
                            <option value="gh">Ghana</option>
                            <option value="gr">Greece</option>
                            <option value="gd">Grenada</option>
                            <option value="gu">Guam (USA)</option>
                            <option value="gt">Guatemala</option>
                            <option value="gw">Guinea-Bissau</option>
                            <option value="gy">Guyana</option>
                            <option value="ht">Haiti</option>
                            <option value="hn">Honduras</option>
                            <option value="hk">Hong Kong</option>
                            <option value="hu">Hungary</option>
                            <option value="is">Iceland</option>
                            <option value="in">India</option>
                            <option value="id">Indonesia</option>
                            <option value="ie">Ireland</option>
                            <option value="il">Israel</option>
                            <option value="it">Italy</option>
                            <option value="jm">Jamaica</option>
                            <option value="jp">日本</option>
                            <option value="jo">Jordan</option>
                            <option value="kz">Kazakhstan</option>
                            <option value="ke">Kenya</option>
                            <option value="kw">Kuwait</option>
                            <option value="kg">Kyrgyzstan</option>
                            <option value="la">Laos</option>
                            <option value="lv">Latvia</option>
                            <option value="lb">Lebanon</option>
                            <option value="lr">Liberia</option>
                            <option value="li">Liechtenstein</option>
                            <option value="lt">Lithuania</option>
                            <option value="lu">Luxembourg</option>
                            <option value="mo">Macau</option>
                            <option value="mk">Macedonia</option>
                            <option value="mg">Madagascar</option>
                            <option value="mw">Malawi</option>
                            <option value="my">Malaysia</option>
                            <option value="ml">Mali</option>
                            <option value="mt">Malta</option>
                            <option value="mr">Mauritania</option>
                            <option value="mu">Mauritius</option>
                            <option value="mx">Mexico</option>
                            <option value="fm">Micronesia</option>
                            <option value="md">Moldova (Republic of)</option>
                            <option value="mn">Mongolia</option>
                            <option value="ms">Montserrat</option>
                            <option value="ma">Morocco</option>
                            <option value="mz">Mozambique</option>
                            <option value="mm">Myanmar</option>
                            <option value="na">Namibia</option>
                            <option value="np">Nepal</option>
                            <option value="nl">Netherlands</option>
                            <option value="nz">New Zealand</option>
                            <option value="ni">Nicaragua</option>
                            <option value="ne">Niger</option>
                            <option value="ng">Nigeria</option>
                            <option value="mp">Northern Mariana Islands (USA)</option>
                            <option value="no">Norway</option>
                            <option value="om">Oman</option>
                            <option value="pk">Pakistan</option>
                            <option value="pw">Palau</option>
                            <option value="pa">Panama</option>
                            <option value="pg">Papua New Guinea</option>
                            <option value="py">Paraguay</option>
                            <option value="pe">Peru</option>
                            <option value="ph">Philippines</option>
                            <option value="pl">Poland</option>
                            <option value="pt">Portugal</option>
                            <option value="pr">Puerto Rico (USA)</option>
                            <option value="qa">Qatar</option>
                            <option value="cg">Republic Of Congo</option>
                            <option value="ro">Romania</option>
                            <option value="ru">Russia</option>
                            <option value="rw">Rwanda</option>
                            <option value="kn">Saint Kitts &amp; Nevis Anguilla</option>
                            <option value="lc">Saint Lucia</option>
                            <option value="vc">Saint Vincent &amp; Grenadines</option>
                            <option value="st">Sao Tome and Principe</option>
                            <option value="sa">Saudi Arabia</option>
                            <option value="sn">Senegal</option>
                            <option value="rs">Serbia</option>
                            <option value="sc">Seychelles</option>
                            <option value="sl">Sierra Leone</option>
                            <option value="sg">Singapore</option>
                            <option value="sk">Slovakia</option>
                            <option value="si">Slovenia</option>
                            <option value="sb">Solomon Islands</option>
                            <option value="za">South Africa</option>
                            <option value="kr">South Korea</option>
                            <option value="es">Spain</option>
                            <option value="lk">Sri Lanka</option>
                            <option value="sr">Suriname</option>
                            <option value="sz">Swaziland</option>
                            <option value="se">Sweden</option>
                            <option value="ch">Switzerland</option>
                            <option value="tw">Taiwan</option>
                            <option value="tj">Tajikistan</option>
                            <option value="tz">Tanzania</option>
                            <option value="th">Thailand</option>
                            <option value="tg">Togo</option>
                            <option value="tt">Trinidad and Tobago</option>
                            <option value="tn">Tunisia</option>
                            <option value="tr">Turkey</option>
                            <option value="tm">Turkmenistan</option>
                            <option value="tc">Turks and Caicos Islands</option>
                            <option value="vi">US Virgin Islands (USA)</option>
                            <option value="ug">Uganda</option>
                            <option value="ua">Ukraine</option>
                            <option value="ae">United Arab Emirates</option>
                            <option value="gb">United Kingdom</option>
                            <option value="us" selected>United States</option>
                            <option value="uy">Uruguay</option>
                            <option value="uz">Uzbekistan</option>
                            <option value="ve">Venezuela</option>
                            <option value="vn">Vietnam</option>
                            <option value="ye">Yemen</option>
                            <option value="zm">Zambia</option>
                            <option value="zw">Zimbabwe</option>
    				</select>

    <div class="float-right">
      <label for="drop2">Location:</label>
      <select name="drop2" id="dropForm">
                          <option value="AL" type="text" >Alabama</option>
                          <option value="AK" type="text" >Alaska</option>
                          <option value="AZ" type="text" >Arizona</option>
                          <option value="AR" type="text" >Arkansas</option>
                          <option value="CA" type="text" >California</option>
                          <option value="CO" type="text" >Colorado</option>
                          <option value="CT" type="text" >Connecticut</option>
                          <option value="DE" type="text" >Delaware</option>
                          <option value="FL" type="text" >Florida</option>
                          <option value="GA" type="text" >Georgia</option>
                          <option value="HI" type="text" >Hawaii</option>
                          <option value="ID" type="text" >Idaho</option>
                          <option value="IL" type="text" >Illinois</option>
                          <option value="IN" type="text" >Indiana</option>
                          <option value="IA" type="text" >Iowa</option>
                          <option value="KS" type="text" >Kansas</option>
                          <option value="KY" type="text" >Kentucky</option>
                          <option value="LA" type="text" >Louisiana</option>
                          <option value="ME" type="text" >Maine</option>
                          <option value="MD" type="text" >Maryland</option>
                          <option value="MA" type="text" >Massachusetts</option>
                          <option value="MI" type="text" >Michigan</option>
                          <option value="MN" type="text" >Minnesota</option>
                          <option value="MS" type="text" >Mississippi</option>
                          <option value="MO" type="text" >Missouri</option>
                          <option value="MT" type="text" >Montana</option>
                          <option value="NE" type="text" >Nebraska</option>
                          <option value="NV" type="text" >Nevada</option>
                          <option value="NH" type="text" >New Hampshire</option>
                          <option value="NJ" type="text" >New Jersey</option>
                          <option value="NM" type="text" >New Mexico</option>
                          <option value="NY" type="text" >New York</option>
                          <option value="NC" type="text" >North Carolina</option>
                          <option value="ND" type="text" >North Dakota</option>
                          <option value="OH" type="text" >Ohio</option>
                          <option value="OK" type="text" >Oklahoma</option>
                          <option value="OR" type="text" >Oregon</option>
                          <option value="PA" type="text" >Pennsylvania</option>
                          <option value="RI" type="text" >Rhode Island</option>
                          <option value="SC" type="text" >South Carolina</option>
                          <option value="SD" type="text" >South Dakota</option>
                          <option value="TN" type="text" >Tennessee</option>
                          <option value="TX" type="text" >Texas</option>
                          <option value="UT" type="text" >Utah</option>
                          <option value="VT" type="text" >Vermont</option>
                          <option value="VA" type="text" >Virginia</option>
                          <option value="WA" type="text" >Washington</option>
                          <option value="WV" type="text" >West Virginia</option>
                          <option value="WI" type="text" >Wisconsin</option>
                          <option value="WY" type="text" >Wyoming</option>
                      </select>
    </div>

    <br />
    <br />

    <label for="zip">Zip Code:</label>
    <input type="text" name="zip" size="12" />

    <div class="float-right">
      <label for="phoneNumber">Phone No:</label>
      <input type="text" name="phoneNumber" required/>
    </div>

    <br />
  </div>

  <br />

  <div class="center-element">
    Gender:
    <label for="gender">Male:</label>
    <input type="radio" name="gender" />
    <label for="gender">Female:</label>
    <input type="radio" name="gender" />
  </div>

  <br />

  <hr />


  <div class="center-element">
    <b>Any additional info:</b>
    <br />
    <br />


    <label for="sub">Subject:</label>
    <input type="text" name="sub" id="sub" placeholder="topic" />
    <!--SUBJECT BAR-->


    <br />
    <br />

    <textarea type="text" placeholder="Ask us a question..." id="notePad" rows="8" cols="50"></textarea>

    <br />
    <br />
    <br />
  </div>

  <hr />




  <button type="reset" id="reset-button">Clear form</button>
  <!--reset button-->

  <br />
  <br />


  <button type="submit" id="submit-form-button">Get Started</button>
  <!--submit button-->


</form>

最佳答案

要修复输入对齐方式，请为左侧的标签指定一个宽度，并将它们的显示设置为inline-block。

.label-left {
  display: inline-block;
  width: 8em;
}

为了对齐主题，我会绝对定位标签主题......

.center-element {
  position: relative;
}

.subject {
  position: absolute;
  top: 45px;
  left: 80px;
}

body {
  font-size: 100%;
}

h1 {
  text-align: center;
  font-size: 2.3em;
  /*1em = 16px.*/
}


/*OVERALL FORM EDITING*/

form {
  margin: auto;
  /*used to center the form*/
  width: 700px;
  /*prevents the form from stretching over the whole page*/
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  padding: 20px;
  /*pads the inside of the form*/
  font-size: 0.875em;
  /*1em = 16px.*/
}


/*OVERALL FORM EDITING*/

.center-element {
  text-align: center;
}

.float-right {
  float: right;
}


/*position input fields to the right on the form*/


/*INPUT FIELDS*/

input[type="text"] {
  /*controls the size, color, e.t.c for the input "text" fields */
  border-radius: 7px;
  border: 2px solid #f4511e;
  padding: 6px;
  box-sizing: border-box;
  outline: none;
  display: inline-block;
  width: 190px;
}

input[type="text"]:focus {
  /*for the color inside the input "text" fields when clicked*/
  background-color: #9BDFE4;
}

input[type="number"] {
  /*controls the size, color, e.t.c for the input "number" fields */
  display: inline-block;
  /*allows our elements to have a width and a height.*/
  border-radius: 7px;
  border: 2px solid #F28C6D;
  padding: 6px;
  box-sizing: border-box;
  outline: none;
  width: 190px;
  /*used to specify the size of the input fields*/
}

input[type="number"]:focus {
  /*for the color inside the input "number" fields when clicked*/
  background-color: #9BDFE4;
}


/*INPUT FIELDS*/


/*BUTTONS*/

#submit-form-button {
  /*for the "Get Started" button*/
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  color: #FFFFFF;
  background-color: #F28C6D;
  cursor: pointer;
  outline: none;
}

#submit-form-button:hover {
  /*controls the color of the "Get Started" button when you hover over it*/
  background-color: #EB4408;
}

#reset-button {
  /*for the "Clear form" button*/
  border-radius: 50px;
  cursor: pointer;
  color: #FFFFFF;
  background-color: #9BDFE4;
  float: right;
  outline: none;
}

#reset-button:hover {
  /*controls the color of the "Clear form" button when you hover over it*/
  background-color: #0066CC;
}


/*BUTTONS*/


/*DROPDOWN MENUS*/

#dropForm {
  display: inline-block;
  /*allows our elements to have a width and a height.*/
  border-radius: 7px;
  border: 2px solid #f4511e;
  padding: 6px;
  box-sizing: border-box;
  outline: none;
  width: 190px;
  /*used to specify the size of the input fields*/
}


/*DROPDOWN MENUS*/


/*TEXT AREA BOX & SUBJECT AREA BOX*/

#sub {
  width: 395px;
  padding: 12px;
}

#notePad {
  border-radius: 7px;
  border: 2px solid #f4511e;
  padding: 12px;
  outline: none;
  resize: none;
  box-sizing: border-box;
}

#notePad:focus {
  background-color: #9BDFE4;
}

.center-element {
  position: relative;
}

.label-left {
  display: inline-block;
  width: 8em;
}

.subject {
  position: absolute;
  top: 45px;
  left: 95px;
}

<form>


  <div id="aligning-input-fields">
    <label for="firstname" class="label-left">First Name:</label>
    <input type="text" name="firstname" required/>

    <div class="float-right">
      <label for="lastname">Last Name:</label>
      <input type="text" name="lastname" required/>
    </div>

    <br />
    <br />

    <label for="email-1" class="label-left">Enter your e-mail:</label>
    <input type="text" name="email-1" required/>

    <div class="float-right">
      <label for="email-2">Confirm your email:</label>
      <input type="text" name="email-2" required/>
    </div>

    <br />
    <br />

    <label for="drop1" class="label-left">Country:</label>
    <select name="drop1" id="dropForm">
                            <option value="au">Australia</option>
                            <option value="al">Albania</option>
                            <option value="dz">Algeria</option>
                            <option value="ao">Angola</option>
                            <option value="ai">Anguilla</option>
                            <option value="ag">Antigua and Barbuda</option>
                            <option value="ar">Argentina</option>
                            <option value="am">Armenia</option>
                            <option value="aw">Aruba</option>
                            <option value="at">Austria</option>
                            <option value="az">Azerbaijan</option>
                            <option value="bs">Bahamas</option>
                            <option value="bh">Bahrain</option>
                            <option value="bd">Bangladesh</option>
                            <option value="bb">Barbados</option>
                            <option value="by">Belarus</option>
                            <option value="be">Belgium</option>
                            <option value="bz">Belize</option>
                            <option value="bj">Benin</option>
                            <option value="bm">Bermuda</option>
                            <option value="bt">Bhutan</option>
                            <option value="bo">Bolivia</option>
                            <option value="ba">Bosnia and Herzegovina</option>
                            <option value="bw">Botswana</option>
                            <option value="br">Brazil</option>
                            <option value="vg">British Virgin Islands</option>
                            <option value="bn">Brunei</option>
                            <option value="bg">Bulgaria</option>
                            <option value="bf">Burkina Faso</option>
                            <option value="ca">Canada</option>
                            <option value="kh">Cambodia</option>
                            <option value="cm">Cameroon</option>
                            <option value="cv">Cape Verde</option>
                            <option value="ky">Cayman Islands</option>
                            <option value="td">Chad</option>
                            <option value="cl">Chile</option>
                            <option value="cn">China</option>
                            <option value="co">Colombia</option>
                            <option value="cr">Costa Rica</option>
                            <option value="hr">Croatia</option>
                            <option value="cy">Cyprus</option>
                            <option value="cz">Czech Republic</option>
                            <option value="ci">Côte d&#39;Ivoire</option>
                            <option value="dk">Denmark</option>
                            <option value="dm">Dominica</option>
                            <option value="do">Dominican Republic</option>
                            <option value="ec">Ecuador</option>
                            <option value="eg">Egypt</option>
                            <option value="sv">El Salvador</option>
                            <option value="ee">Estonia</option>
                            <option value="fj">Fiji</option>
                            <option value="fi">Finland</option>
                            <option value="fr">France</option>
                            <option value="ga">Gabon</option>
                            <option value="gm">Gambia</option>
                            <option value="de">Germany</option>
                            <option value="gh">Ghana</option>
                            <option value="gr">Greece</option>
                            <option value="gd">Grenada</option>
                            <option value="gu">Guam (USA)</option>
                            <option value="gt">Guatemala</option>
                            <option value="gw">Guinea-Bissau</option>
                            <option value="gy">Guyana</option>
                            <option value="ht">Haiti</option>
                            <option value="hn">Honduras</option>
                            <option value="hk">Hong Kong</option>
                            <option value="hu">Hungary</option>
                            <option value="is">Iceland</option>
                            <option value="in">India</option>
                            <option value="id">Indonesia</option>
                            <option value="ie">Ireland</option>
                            <option value="il">Israel</option>
                            <option value="it">Italy</option>
                            <option value="jm">Jamaica</option>
                            <option value="jp">日本</option>
                            <option value="jo">Jordan</option>
                            <option value="kz">Kazakhstan</option>
                            <option value="ke">Kenya</option>
                            <option value="kw">Kuwait</option>
                            <option value="kg">Kyrgyzstan</option>
                            <option value="la">Laos</option>
                            <option value="lv">Latvia</option>
                            <option value="lb">Lebanon</option>
                            <option value="lr">Liberia</option>
                            <option value="li">Liechtenstein</option>
                            <option value="lt">Lithuania</option>
                            <option value="lu">Luxembourg</option>
                            <option value="mo">Macau</option>
                            <option value="mk">Macedonia</option>
                            <option value="mg">Madagascar</option>
                            <option value="mw">Malawi</option>
                            <option value="my">Malaysia</option>
                            <option value="ml">Mali</option>
                            <option value="mt">Malta</option>
                            <option value="mr">Mauritania</option>
                            <option value="mu">Mauritius</option>
                            <option value="mx">Mexico</option>
                            <option value="fm">Micronesia</option>
                            <option value="md">Moldova (Republic of)</option>
                            <option value="mn">Mongolia</option>
                            <option value="ms">Montserrat</option>
                            <option value="ma">Morocco</option>
                            <option value="mz">Mozambique</option>
                            <option value="mm">Myanmar</option>
                            <option value="na">Namibia</option>
                            <option value="np">Nepal</option>
                            <option value="nl">Netherlands</option>
                            <option value="nz">New Zealand</option>
                            <option value="ni">Nicaragua</option>
                            <option value="ne">Niger</option>
                            <option value="ng">Nigeria</option>
                            <option value="mp">Northern Mariana Islands (USA)</option>
                            <option value="no">Norway</option>
                            <option value="om">Oman</option>
                            <option value="pk">Pakistan</option>
                            <option value="pw">Palau</option>
                            <option value="pa">Panama</option>
                            <option value="pg">Papua New Guinea</option>
                            <option value="py">Paraguay</option>
                            <option value="pe">Peru</option>
                            <option value="ph">Philippines</option>
                            <option value="pl">Poland</option>
                            <option value="pt">Portugal</option>
                            <option value="pr">Puerto Rico (USA)</option>
                            <option value="qa">Qatar</option>
                            <option value="cg">Republic Of Congo</option>
                            <option value="ro">Romania</option>
                            <option value="ru">Russia</option>
                            <option value="rw">Rwanda</option>
                            <option value="kn">Saint Kitts &amp; Nevis Anguilla</option>
                            <option value="lc">Saint Lucia</option>
                            <option value="vc">Saint Vincent &amp; Grenadines</option>
                            <option value="st">Sao Tome and Principe</option>
                            <option value="sa">Saudi Arabia</option>
                            <option value="sn">Senegal</option>
                            <option value="rs">Serbia</option>
                            <option value="sc">Seychelles</option>
                            <option value="sl">Sierra Leone</option>
                            <option value="sg">Singapore</option>
                            <option value="sk">Slovakia</option>
                            <option value="si">Slovenia</option>
                            <option value="sb">Solomon Islands</option>
                            <option value="za">South Africa</option>
                            <option value="kr">South Korea</option>
                            <option value="es">Spain</option>
                            <option value="lk">Sri Lanka</option>
                            <option value="sr">Suriname</option>
                            <option value="sz">Swaziland</option>
                            <option value="se">Sweden</option>
                            <option value="ch">Switzerland</option>
                            <option value="tw">Taiwan</option>
                            <option value="tj">Tajikistan</option>
                            <option value="tz">Tanzania</option>
                            <option value="th">Thailand</option>
                            <option value="tg">Togo</option>
                            <option value="tt">Trinidad and Tobago</option>
                            <option value="tn">Tunisia</option>
                            <option value="tr">Turkey</option>
                            <option value="tm">Turkmenistan</option>
                            <option value="tc">Turks and Caicos Islands</option>
                            <option value="vi">US Virgin Islands (USA)</option>
                            <option value="ug">Uganda</option>
                            <option value="ua">Ukraine</option>
                            <option value="ae">United Arab Emirates</option>
                            <option value="gb">United Kingdom</option>
                            <option value="us" selected>United States</option>
                            <option value="uy">Uruguay</option>
                            <option value="uz">Uzbekistan</option>
                            <option value="ve">Venezuela</option>
                            <option value="vn">Vietnam</option>
                            <option value="ye">Yemen</option>
                            <option value="zm">Zambia</option>
                            <option value="zw">Zimbabwe</option>
    				</select>

    <div class="float-right">
      <label for="drop2">Location:</label>
      <select name="drop2" id="dropForm">
                          <option value="AL" type="text" >Alabama</option>
                          <option value="AK" type="text" >Alaska</option>
                          <option value="AZ" type="text" >Arizona</option>
                          <option value="AR" type="text" >Arkansas</option>
                          <option value="CA" type="text" >California</option>
                          <option value="CO" type="text" >Colorado</option>
                          <option value="CT" type="text" >Connecticut</option>
                          <option value="DE" type="text" >Delaware</option>
                          <option value="FL" type="text" >Florida</option>
                          <option value="GA" type="text" >Georgia</option>
                          <option value="HI" type="text" >Hawaii</option>
                          <option value="ID" type="text" >Idaho</option>
                          <option value="IL" type="text" >Illinois</option>
                          <option value="IN" type="text" >Indiana</option>
                          <option value="IA" type="text" >Iowa</option>
                          <option value="KS" type="text" >Kansas</option>
                          <option value="KY" type="text" >Kentucky</option>
                          <option value="LA" type="text" >Louisiana</option>
                          <option value="ME" type="text" >Maine</option>
                          <option value="MD" type="text" >Maryland</option>
                          <option value="MA" type="text" >Massachusetts</option>
                          <option value="MI" type="text" >Michigan</option>
                          <option value="MN" type="text" >Minnesota</option>
                          <option value="MS" type="text" >Mississippi</option>
                          <option value="MO" type="text" >Missouri</option>
                          <option value="MT" type="text" >Montana</option>
                          <option value="NE" type="text" >Nebraska</option>
                          <option value="NV" type="text" >Nevada</option>
                          <option value="NH" type="text" >New Hampshire</option>
                          <option value="NJ" type="text" >New Jersey</option>
                          <option value="NM" type="text" >New Mexico</option>
                          <option value="NY" type="text" >New York</option>
                          <option value="NC" type="text" >North Carolina</option>
                          <option value="ND" type="text" >North Dakota</option>
                          <option value="OH" type="text" >Ohio</option>
                          <option value="OK" type="text" >Oklahoma</option>
                          <option value="OR" type="text" >Oregon</option>
                          <option value="PA" type="text" >Pennsylvania</option>
                          <option value="RI" type="text" >Rhode Island</option>
                          <option value="SC" type="text" >South Carolina</option>
                          <option value="SD" type="text" >South Dakota</option>
                          <option value="TN" type="text" >Tennessee</option>
                          <option value="TX" type="text" >Texas</option>
                          <option value="UT" type="text" >Utah</option>
                          <option value="VT" type="text" >Vermont</option>
                          <option value="VA" type="text" >Virginia</option>
                          <option value="WA" type="text" >Washington</option>
                          <option value="WV" type="text" >West Virginia</option>
                          <option value="WI" type="text" >Wisconsin</option>
                          <option value="WY" type="text" >Wyoming</option>
                      </select>
    </div>

    <br />
    <br />

    <label for="zip" class="label-left">Zip Code:</label>
    <input type="text" name="zip" size="12" />

    <div class="float-right">
      <label for="phoneNumber">Phone No:</label>
      <input type="text" name="phoneNumber" required/>
    </div>

    <br />
  </div>

  <br />

  <div class="center-element">
    Gender:
    <label for="gender">Male:</label>
    <input type="radio" name="gender" />
    <label for="gender">Female:</label>
    <input type="radio" name="gender" />
  </div>

  <br />

  <hr />


  <div class="center-element">
    <b>Any additional info:</b>
    <br />
    <br />


    <label for="sub" class="subject">Subject:</label>
    <input type="text" name="sub" id="sub" placeholder="topic" />
    <!--SUBJECT BAR-->


    <br />
    <br />

    <textarea type="text" placeholder="Ask us a question..." id="notePad" rows="8" cols="50"></textarea>

    <br />
    <br />
    <br />
  </div>

  <hr />


  <button type="reset" id="reset-button">Clear form</button>
  <!--reset button-->

  <br />
  <br />


  <button type="submit" id="submit-form-button">Get Started</button>
  <!--submit button-->


</form>

Codepen if you prefer

关于html - 对齐我的输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42840632/

文章推荐： html - 为什么图片不放在html页面的最左上角？

文章推荐： javascript - 滚动后再次停止加载 iframe 吗？

文章推荐： html - 在 css div 表中为空 div 行设置 1px 高度的最佳方法？

文章推荐： javascript - 使用 Owl Carousel Url Hash Navigation 更改按钮样式

c++ - 输入、输出、输入/输出参数
我有一个测试即将进行，我想澄清两个有关参数的问题。在我的笔记中指出，将参数传递给函数的推荐方法是使用“按引用传递” const type& x; // for "in" parameters
parameters - 输入、输出、输入、返回 UML 中的参数方向
当我通过 OMG 2.5(Beta)推广的 UML 规范阅读以下概念时: in: Indicates that Parameter values are passed in by the caller
javascript - Angular 8 : (keyup. 输入)不触发只读 html 输入
我试图在用户按下 Enter 时触发一个函数。我将此输入设置为只读的原因是限制用户在填充值后修改输入中的值。该值来自将在点击属性中触发的弹出窗口。问题是 keyup.enter 没有触发该输入。代
jquery-plugins - jQuery token 输入( token 输入)在模式弹出窗口上不起作用，列表隐藏在弹出窗口下
我在jQuery中使用模式弹出窗口控件，该弹出窗口具有由jQuery Tokenize输入插件提供动力的输入文本。问题是，当我在模式弹出文本框中键入内容时， token 化插件的搜索结果显示为隐藏在弹
javascript - 在 getElementsByTagName 中只选择 Checkbox 输入，排除 Textbox 输入
我有一个问题。当我选中复选框时，系统工作正常，总值发生变化，但一旦我修改文本输入，它就会变为 0。我需要将此文本框输入排除在更改值之外。这是 html: $15000 $
css - 输入[类型 ="button"]、输入[类型 ="submit"]、按钮 CSS 行为不正常
我正在努力让它发挥作用，但还是有些不对劲。我想用 CSS 设置提交按钮的样式以匹配我已有的按钮。风格: input[type="button"], input[type="submit"], b
Java数组通过nextInt()输入
import java.util.*;; public class selection { Scanner in=new Scanner(System.in); private
networking - 输入/输出带宽是否共享相同的网卡限制？
这可能是一个非常菜鸟的问题。假设我有一个带宽限制为 100MB/s 的网卡，那么输入/输出带宽是否有可能达到该限制同时 ?或者我会在任何时候遇到这个不等式:in bandwidth + out ba
scala - `this` 输入 Scala
看着这个问题，Fill immutable map with for loop upon creation ，我很好奇是什么this表示在 Map(1 -> this) . scala> Map(1
excel - 如何根据excel中的另一个单元格值限制单元格中的值输入/输入？
我有这样的东西一个乙问？是或否数字数字或零我想做的是: 如果 B1 = “Y”，则让用户在 B2 中输入一个数字。如果 B1 = “N”，则将 B2 中的值更改为零，并且不允许用户在
表格单元格内的 HTML 输入
我有一个包含许多列的表，我想添加 input标题单元格内的字段，但我希望输入适合根据正文内容的宽度。这是没有 input 的样子领域: 这就是 input 的样子领域: 可以看出，像“index”和
FTP 输入/输出文件夹名称最佳实践
关于为 FTP 客户端设置传出和传入文件夹，您遵循哪些最佳实践(如果有)？我们通常使用“outgoing”和“incoming”，但无论你如何表述方向，它都可以有两种解释方式，具体取决于名称相对于哪一
haskell - 输入 ‘where’ 解析错误
我正在尝试“求解”给定 d 的 Pell 方程:x^2 - d * y^2 = 1，或者至少我想得到最小的 x > 0 来求解方程。到目前为止，一切都很好。这是我的 Haskell 代码 minX :
python - VS代码在运行ctrl时移至下一行+输入
我是VS Code的新手，可以使用Ctrl + Enter将代码运行到python交互式窗口中。我希望光标自动移动到下一行，因此我可以逐行浏览代码。能做到吗？最佳答案如this blog pos
多维数组的 typescript 输入
我正在创建一个 bool 值矩阵/二维数组，并且我想为 dategrid 推断一种不仅仅是“ANY”的类型。 let yearRange = [2000,2001,2002,2003,2004]; l
python - “输入”两个具有最低复杂度的排序列表
我有两个排序的列表，例如 a = [1, 4, 7, 8] b = [1, 2, 3, 4, 5, 6] 我想知道a中的每个项目是否在b中。对于上面的示例，我想找到 a_in_b = [True, T
javascript - 输入/返回时指令语法错误
菜鸟警报这很奇怪 - 当我编写以下代码时，尝试在 AngularJS 中创建自定义指令: myModule.directive('myTab', function(){ console.lo
javascript - 单击显示文本字段(输入)
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
godot - 输入 "Any"的正确方法
假设我正在使用 gdscript 静态类型，并且对于一个函数参数，我事先不知道我会得到什么。这就是 python 中 typing.Any 的作用。如何使用 gdscript 做到这一点？似乎 Va
javascript - 向图像添加字段(输入)
我使用 dropzone 上传多个图像，并且工作正常，直到我想为每个图像插入品牌和网址。我遇到的唯一问题是，当我要从输入字段获取值时，我会从服务器获取来自字段(品牌、网址)的未定义值，但如果我使用静

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 对齐我的输入字段