输入标签的对齐问题

时间：2015-03-24 20:05:54

标签： forms input alignment wufoo

我正在尝试对齐此表单输入。它们都是相同的大小，问题是标签强制输入向右推。我试图让它看起来像这样：

http://imgur.com/1J958bb

但它看起来像这样：

.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>

提前谢谢你。

1 个答案:

答案 0 :(得分：0)

一种解决方案是以这种方式设置标签的样式：

label{
  display:inline-block;
  width:150px;
}

输入全部对齐！如果您还希望输入具有固定宽度（如图片中所示），请不要忘记设置样式。

希望有所帮助：）

相关问题
最新问题