如何使标签与Textarea相同.

Question

我很困惑为什么文本区域与Message不是真的一行.消息在底部,它应该在顶部.我的代码是这样的.

<table>
                    <tr>
                        <td class="contact-firstcol"> <label for="name">Name</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <input type="text" name="name" id="name" /> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"> <label for="email">Email</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <input type="text" name="email" id="email" /> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"> <label for="phone">Phone</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <input type="text" name="phone" id="phone" /> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"> <label for="message">Message</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <textarea id="message" name="message"></textarea> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"></td>
                        <td class="contact-secondcol"></td>
                        <td class="contact-thirdcol"> <input type="submit" name="submit" value="SUBMIT" /> </td>
                </table>

我的CSS在这里

    table {
    line-height:30px;
}
.contact-firstcol {
    width:100px;
    font-size:17px;
    letter-spacing:2px;
    border:1px solid white;
}
.contact-secondcol {
    color:#FFFFFF;
    font-family:'alegreya_sansregular';
    width:20px;
    text-align:center;
    font-size:17px;
    border:1px solid white;
}
.contact-thirdcol {
    width:400px;
    padding-left:20px;
    border:1px solid white;
}
.form textarea {
    width: 250px;
    max-width: 250px;
    height: 100px;
    max-height:100px;
    line-height: 150%;
}

到目前为止,我试图用这种方式.而且根本不起作用.

margin-top:-20px padding-top:-20px;

看看JSFIDDLE.你能否就这个问题给我们任何建议？

Answer 1

vertical-align表单元格默认情况下是middle.只需将其更改为top.

http://jsfiddle.net/B3z6Z/1/

td { vertical-align: top; }