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; }

Answer 2

您需要更新css类：

.contact-firstcol {  
    width:100px;
    font-size:17px;
    letter-spacing:2px;
    border:1px solid white;
    vertical-align: top;
}

我添加了“vertical-align：top;”它。

如何使标签与Textarea相同。

2 个答案: