将 textarea 标签定位在上方（有或没有表格）答案

【问题标题】：Positioning textarea label above (with or without table)将 textarea 标签定位在上方（有或没有表格）
【发布时间】：2016-02-08 19:39:57
【问题描述】：

我正在尝试将我的两个标签（“您的消息：”和“您的电子邮件：”）放在每个文本区域的左上角，“您的消息：”在顶部的文本区域。虽然即使通过这种方法：How will I align the label of a text area to top? 我也无法让它工作。是否需要该表才能正常工作？我尝试了其他方法来让它发挥作用，例如将表单分组到 -p- 标记中，但这也不起作用。

HTML

<div id="ContactUsForm">
    <p>Contact Us</p>
        <form>
            <table>
            <td>
            <label for="message">your message:</label>
            <textarea id="message" class="contact" name="message"</textarea>
            <label for="email">your email:</label>
            <textarea id="email" class="contact" name="email"></textarea>
            </td>
            </table>
        </form>
</div>

CSS

#ContactUsForm {
    position: absolute;
    width: 1400px;
    height: 400px;
    top: 227px;
    left: 42px;
    border: 2px solid #E64A19;
}

#ContactUsForm p {
    text-decoration: underline;
    font-weight: bold;
    position: absolute;
    top: -15px;
    left: 50px;
    font-size: 30px;
}

.contact {
    position: absolute;
    background: white;
    border: 2px solid #E64A19;
}

#message {
    width: 500px;
    height: 150px;
    top: 100px;
    left: 30px;
    resize: none;
    position: absolute;
}

#email {
    width: 500px;
    height: 70px;
    position: absolute;
    resize: none;
    top: 300px;
    left: 30px;
}

label {
    vertical-align: top;
}

【问题讨论】：

旁注：您缺少tr 标签。
你的开场 textarea 标签没有关闭 <textarea id="message" class="contact" name="message"</textarea>

标签： html css

【解决方案1】：

摆脱位置：绝对，在这种情况下，我看不出在表格中使用它的意义。

<div id="ContactUsForm">
    <p>Contact Us</p>
        <form>
            <table>
            <tr>
            <td>
            <label for="message">your message:</label>
            <textarea id="message" class="contact" name="message"></textarea>
            <label for="email">your email:</label>
            <textarea id="email" class="contact" name="email"></textarea>
            </td>
            </tr>
            </table>
        </form>
</div>

    #ContactUsForm {
    width: 1400px;
    height: 400px;
    border: 2px solid #E64A19;
}

#ContactUsForm p {
    text-decoration: underline;
    font-weight: bold;
    font-size: 30px;
}

.contact {
    background: white;
    border: 2px solid #E64A19;
}

#message {
    width: 500px;
    height: 150px;
    top: 100px;
    left: 30px;
    resize: none;
    display: block;
}

#email {
    width: 500px;
    height: 70px;
    display: block;
    resize: none;
    top: 300px;
    left: 30px;
}

label {
    vertical-align: top;
}

这里是 JSFiddle：https://jsfiddle.net/pa4r62eu/

【讨论】：

【解决方案2】：

您不需要为此使用表格。

您只需进行两项更改即可实现您想要的：

删除代码中的所有position: absolute;。这样，每个元素将被放置在下一个元素之上（并且您可以删除所有左侧和顶部规则）。
将display: block; 规则添加到您的标签。它会让你的标签占据其父级的所有宽度，并且文本区域将被放置在它们之下。

查看sn-p，你可以看到你的代码会变得多么干净：

#ContactUsForm {
  width: 1400px;
  height: 400px;
  border: 2px solid #E64A19;
  padding: 10px;
}
#ContactUsForm p {
  text-decoration: underline;
  font-weight: bold;
  font-size: 30px;
}
.contact {
  background: white;
  border: 2px solid #E64A19;
}
#message {
  width: 500px;
  height: 150px;
  resize: none;
}
#email {
  width: 500px;
  height: 70px;
  resize: none;
}
label {
  display: block;
}

<div id="ContactUsForm">
  <p>Contact Us</p>
  <form>
    <label for="message">your message:</label>
    <textarea id="message" class="contact" name="message"></textarea>
    <label for="email">your email:</label>
    <textarea id="email" class="contact" name="email"></textarea>
  </form>
</div>

希望对你有帮助！

【讨论】：