0

これは単純な問題であり、私は何かを見落としているだけだと確信していますが、4行目ラベル垂直に整列していないことに気付くでしょう。こちらの JSFiddle をご覧ください。

http://jsfiddle.net/uidezigns/HJEca/

HTML

<form class="lable_left">
   <p>
      <label for="fn">First name:</label>
      <input type="text" name="fn">
   </p>
   <p>
      <label for="ln">Last name:</label>
      <input type="text" name="ln">
   </p>
   <p>
      <label for="ph">Phone Number:</label>
      <input type="tel" name="ph">
   </p>
   <p>
      <label for="ad">Street Address:</label>
      <textarea name="ad"></textarea>
   </p>
   <p>
      <label for="ct">City:</label>
      <input type="text" name="ct">
   </p>
   <p>
      <label for="st">State:</label>
      <input type="text" name="st">
   </p>
   <p>
      <label for="zc">Postal:</label>
      <input type="text" name="zc">
   </p>
   <input type="submit" value="Submit">
</form>

CSS

/* --- skins for visibility - Remove for implementation --- */

form {
    margin: 40px;
    padding: 20px;
    background-color: #FAE2BF;
}

form p {
    background-color: #F7CBC7;
}

form label {
    background-color: #E5E2DB;
}

        /*----------------------------------------------------------*/

form {
    font: normal 12px Arial;
    display: block;
}

form p {
    padding: 0;
    margin: 2px 0;
    float: left;
    width: 100%;
}

form.two_row p {
    width: 50%;
}

form.three_row p {
    width: 33%;
}

form label,form input,form textarea {
    display: block;
}

label {
    margin: 10px 0 0;
}

input {
}

textarea {
    width: 100px height:100px;
    margin: 0;
}

form.lable_left p {
    display: table-cell;
    vertical-align: middle;
}

form.lable_left label,form.lable_left input,form.lable_left textarea {
    display: inline-block;
    margin: 0;
}

form.lable_left label {
    width: 120px;
}

form.lable_left input {
}

input[type="submit"] {
    clear: both;
    float: none;
}

ご提案いただきありがとうございます。

4

2 に答える 2

0

含むlabel { vertical-align: top; }

この jsFiddleを参照してください。

于 2013-10-04T19:48:15.597 に答える