I am trying to align this forms inputs. They are all the same size, the problem is that the labels are forcing the inputs to push to the right. I am trying to get it to look like this:
https://i.sstatic.net/2CNoY.jpg
But it looks like this:
.formWrapper
{
display: block;
width: 1000px;
margin: 0 auto;
}
.personalInformation
{
width: 480px;
display: inline-block;
}
.submissionInformation
{
width: 480px;
display: inline-block;
vertical-align: top;
}
.col-center ul, li
{
list-style-type: none;
}
.col-center hr
{
border-bottom: 1px solid #000;
}
.col-center input, select
{
border-color: #000 !important;
}
.col-center label
{
font-style: italic;
padding: 5px;
}
#saveForm
{
border: 1px solid #000;
width: 150px;
height: 40px;
}
.insert
{
text-align: center;
padding-bottom: 15px;
}
.insert b
{
font-weight: lighter;
font-size: 32px;
}
.insert p
{
font-style: italic;
}
.italic
{
font-style: italic;
}
.bold
{
font-weight: bold;
}
li
{
padding: 10px;
}
http://codepen.io/anon/pen/xbMrBW
<div class="formWrapper">
<div class="col-center">
<div class="personalInformation">
<form>
<b>Personal Information</b>
<ul>
<li id="foli1" class="notranslate ">
<label class="desc" id="title1" for="Field1">
First Name
</label>
<input id="Field1" name="Field1" type="text" class="field text medium" value="" maxlength="255" tabindex="1" onkeyup="" placeholder="First Name" />
</li>
<li id="foli2" class="notranslate ">
<label class="desc" id="title2" for="Field2">
Last Name
</label>
<input id="Field2" name="Field2" type="text" class="field text medium" value="" maxlength="255" tabindex="2" onkeyup="" placeholder="Last Name" />
</li>
<li id="foli3" class="notranslate ">
<label class="desc" id="title3" for="Field3">
Phone Number
</label>
<input id="Field3" name="Field3" type="text" class="field text medium" value="" maxlength="255" tabindex="3" onkeyup="" placeholder="Phone Number" />
</li>
<li id="foli4" class="notranslate ">
<label class="desc" id="title4" for="Field4">
Email
</label>
<input id="Field4" name="Field4" type="text" class="field text medium" value="" maxlength="255" tabindex="4" onkeyup="" placeholder="Email" />
</li>
<li id="foli5" class="notranslate ">
<label class="desc" id="title5" for="Field5">
Address
</label>
<input id="Field5" name="Field5" type="text" class="field text medium" value="" maxlength="255" tabindex="5" onkeyup="" placeholder="Address" />
</li>
<li id="foli6" class="notranslate ">
<label class="desc" id="title6" for="Field6">
City
</label>
<input id="Field6" name="Field6" type="text" class="field text medium" value="" maxlength="255" tabindex="6" onkeyup="" placeholder="City" />
</li>
<li id="foli15" class="notranslate ">
<label class="desc" id="title15" for="Field15">
State
</label>
<select id="Field15" name="Field15" class="field select small" tabindex="7" >
<option value="" selected="selected">
</option>
<option value="Alabama" >
Alabama
</option>
<option value="Alaska" >
Alaska
</option>
<option value="Arizona" >
Arizona
</option>
<option value="Arkansas" >
Arkansas
</option>
<option value="California" >
California
</option>
<option value="Colorado" >
Colorado
</option>
<option value="Connecticut" >
Connecticut
</option>
<option value="Delaware" >
Delaware
</option>
<option value="Florida" >
Florida
</option>
<option value="Georgia" >
Georgia
</option>
<option value="Hawaii" >
Hawaii
</option>
<option value="Idaho" >
Idaho
</option>
<option value="Illinois" >
Illinois
</option>
<option value="Indiana" >
Indiana
</option>
<option value="Iowa" >
Iowa
</option>
<option value="Kansas" >
Kansas
</option>
<option value="Kentucky" >
Kentucky
</option>
<option value="Louisiana" >
Louisiana
</option>
<option value="Maine" >
Maine
</option>
<option value="Maryland" >
Maryland
</option>
<option value="Massachusetts" >
Massachusetts
</option>
<option value="Michigan" >
Michigan
</option>
<option value="Minnesota" >
Minnesota
</option>
<option value="Mississippi" >
Mississippi
</option>
<option value="Missouri" >
Missouri
</option>
<option value="Montana" >
Montana
</option>
<option value="Nebraska" >
Nebraska
</option>
<option value="Nevada" >
Nevada
</option>
<option value="New Hampshire" >
New Hampshire
</option>
<option value="New Jersey" >
New Jersey
</option>
<option value="New Mexico" >
New Mexico
</option>
<option value="New York" >
New York
</option>
<option value="North Carolina" >
North Carolina
</option>
<option value="North Dakota" >
North Dakota
</option>
<option value="Ohio" >
Ohio
</option>
<option value="Oklahoma" >
Oklahoma
</option>
<option value="Oregon" >
Oregon
</option>
<option value="Pennsylvania" >
Pennsylvania
</option>
<option value="Rhode Island" >
Rhode Island
</option>
<option value="South Carolina" >
South Carolina
</option>
<option value="South Dakota" >
South Dakota
</option>
<option value="Tennessee" >
Tennessee
</option>
<option value="Texas" >
Texas
</option>
<option value="Utah" >
Utah
</option>
<option value="Vermont" >
Vermont
</option>
<option value="Virginia" >
Virginia
</option>
<option value="Washington" >
Washington
</option>
<option value="West Virginia" >
West Virginia
</option>
<option value="Wisconsin" >
Wisconsin
</option>
<option value="Wyoming" >
Wyoming
</option>
</select>
</li>
<li id="foli11" class="notranslate ">
<label class="desc" id="title11" for="Field11">
Zip
</label>
<input id="Field11" name="Field11" type="text" class="field text small" value="" maxlength="255" tabindex="8" onkeyup="" placeholder="Zip" />
</li>
<li id="foli17" class="notranslate ">
<label class="desc" id="title17" for="Field17">
Website
</label>
<input id="Field17" name="Field17" type="text" class="field text medium" value="" maxlength="255" tabindex="9" onkeyup="" placeholder="Website" />
</li>
<li id="foli19" class="notranslate ">
<label class="desc" id="title19" for="Field19">
Instagram
</label>
<input id="Field19" name="Field19" type="text" class="field text medium" value="" maxlength="255" tabindex="10" onkeyup="" placeholder="Instagram" />
</li>
<li id="foli20" class="notranslate ">
<label class="desc" id="title20" for="Field20">
Facebook
</label>
<input id="Field20" name="Field20" type="text" class="field text medium" value="" maxlength="255" tabindex="11" onkeyup="" placeholder="Facebook" />
</li>
<li id="foli21" class="notranslate ">
<label class="desc" id="title21" for="Field21">
Twitter
</label>
<input id="Field21" name="Field21" type="text" class="field text medium" value="" maxlength="255" tabindex="12" onkeyup="" placeholder="Twitter" />
</li>
</div>
<div class="submissionInformation">
<b>Submission Information</b>
<li id="foli22" class="notranslate ">
<label class="desc" id="title22" for="Field22">
Medium
</label>
<select id="Field22" name="Field22" class="field select medium" tabindex="13" >
<option value="" selected="selected">
</option>
<option value="Paint" >
Paint
</option>
<option value="Illustration" >
Illustration
</option>
<option value="Photographer" >
Photographer
</option>
<option value="Sculptor" >
Sculptor
</option>
<option value="Jewelry" >
Jewelry
</option>
<option value="Maker" >
Maker
</option>
<option value="Mixed Media" >
Mixed Media
</option>
<option value="Other" >
Other
</option>
</select>
</li>
<li id="foli23" class="notranslate ">
<label class="desc" id="title23" for="Field23">
Other
</label>
<input id="Field23" name="Field23" type="text" class="field text medium" value="" maxlength="255" tabindex="14" onkeyup="" placeholder="Other" />
</li>
<li id="foli24" class="notranslate " >
<label class="desc" id="title24" for="Field24">
Piece 1
</label>
<input id="Field24" name="Field24" type="file" class="field file" size="12" tabindex="15" />
</li>
<li id="foli25" class="notranslate " >
<label class="desc" id="title25" for="Field25">
Piece 2
</label>
<input id="Field25" name="Field25" type="file" class="field file" size="12" tabindex="16" />
</li>
<li id="foli26" class="notranslate notStacked ">
<fieldset>
<![if !IE | (gte IE 8)]>
<legend id="title26" class="desc">
Is this your first showing?
</legend>
<![endif]>
<!--[if lt IE 8]>
<label id="title26" class="desc">
Is this your first showing?
</label>
<![endif]-->
<span>
<input id="Field26" name="Field26" type="checkbox" class="field checkbox" value="Yes" tabindex="17" />
<label class="choice" for="Field26">Yes</label>
</span>
<span>
<input id="Field27" name="Field27" type="checkbox" class="field checkbox" value="No" tabindex="18" />
<label class="choice" for="Field27">No</label>
</span>
</fieldset>
</li>
</div>
</div>
</div>
Thank you in advance.
One solution would be to style the labels this way :
label{
display:inline-block;
width:150px;
}
The inputs will all be aligned! If you also want to have the inputs have a fixed width (like in your picture), don't forget to style them too.
Hope it helps :)