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

想我自己修好了……哈哈,我需要补充一下:

form label,form input,form textarea { vertical-align:middle }

到CSS

于 2013-10-11T21:54:14.393 回答
0

包括label { vertical-align: top; }

看到这个 jsFiddle

于 2013-10-04T19:48:15.597 回答