0
我想讓左邊的輸入字段水平對齊而不影響頁邊距。我將邊距設置爲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'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 & Nevis Anguilla</option>
<option value="lc">Saint Lucia</option>
<option value="vc">Saint Vincent & 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>
\t \t \t \t </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>
嗯，我沒有自學的引導作爲然而。那麼它不可能只與CSS對齊嗎？這是我的第一個形式btw – deeki