HTML表单文本区域问题

【问题标题】：HTML form textarea problemHTML表单文本区域问题
【发布时间】：2011-07-24 12:31:29
【问题描述】：

在我的 html 表单中，文字消息显示在 textarea 的左下角，如何在 textarea 的左上角调整它？ img - http://img641.imageshack.us/img641/415/htms.jpg

      <form name="reg_form" method="post" action="home.php">
                First Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="text" name="f_name"/><br/>  <br/>  
                Last Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="text" name="l_name"/><br/> <br/>
                Your Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="new_email"/><br/> <br/>
                Re-enter Email:&nbsp;<input type="text" name="check_email"/><br/> <br/>
                Message:&nbsp;<textarea cols="30" rows="10" name="message"></textarea>
         </form>

【问题讨论】：

标签： html forms login webforms

【解决方案1】：

您需要使用<label> 标签来放置您的标签。然后使用一些CSS，您可以使用以下方法将其与<textarea> 的顶部对齐：

label
{
    display: inline;
    vertical-align: top;
}

HTML：

<form>
    <label>Message:</label>
    <textarea></textarea>
</form>

我做了一个活生生的例子here。

在其他新闻中

您使用&nbsp; 分隔输入的技术并不是最好的。第一，不同的字体有不同的空间宽度，第二，它让你的代码看起来很垃圾。你可以通过使用 <label>s 和 CSS inline-block 来解决这个问题。有一个工作示例here。

【讨论】：