Html无法对齐表单和按钮

Question

我尝试过制作聊天服务，但它现在有问题了。 我想对齐这两个表单元素，因此它们在一行上。因此，“发送”按钮会移动一点点，以便它就位。

我试过了：

position: relative;

我把它添加到了CSS中。但没有结果。 我不知道如何解决这个问题。因为我不是一个css genuis。

代码： HTML：

<p>&nbsp;</p>
<div id="chattextarea" id="postform">
<form action="" method="POST">
<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')" placeholder="Enter an chat message here...">Enter an chat message here...</textarea>&nbsp;
<input type="hidden" name="chatid" value="<?php echo $chatid ?>">
<input type="submit" value="Send" id="chatmessagesend">
</form>
</div>
</div>

的CSS：

#postform {
    position: relative;
}

照片：

Thansk提前

Answer 1

尝试使用：

 #chattextarea{
   vertical-align: top;
 }

Answer 2

您错过了一个开头div。此外，this也可以使用：

<p>&nbsp;</p><div>
<div id="chattextarea" id="postform">
        <form action="" method="POST">
            <textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');"              onblur="setbg('white')" placeholder="Enter an chat message here...">Enter an chat message         here...
            </textarea>&nbsp;
            <input type="hidden" name="chatid" value="<?php echo $chatid ?>">
            <input type="submit" value="Send" id="chatmessagesend">
        </form>
    </div>
</div>

---

* { margin:0;padding:0; }
#postform {
    position: relative;

}

form > #chatmessagesend { vertical-align: top; }