Question

我试图将我的两个标签（＆＃34;您的消息：＆＃34;和＃34;您的电子邮件：＆＃34;）放在每个textarea的左上角＆＃ 39; s，＆＃34;你的信息：＆＃34;在顶部textarea。虽然通过这种方法：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;
}

Answer 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/

Answer 2

您不需要使用表格。

只需进行两项更改即可实现您的目标：

删除代码的所有from django.views import generic class HardwareEditView(generic.UpdateView): template_name = "hardware.html" form_class = Manage。这样，每个元素都将被放置在下一个元素之上（并且您可以删除所有左侧和顶部规则）。
在标签中添加position: absolute;规则。它会使你的标签占据其父母的所有宽度，而textareas将被放置在它们之下。

查看代码段，您可以看到代码的清洁程度：

display: block;

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

希望它有所帮助！

在上面定位textarea标签（带或不带表）

2 个答案: