将标签放置在文本区域的顶部答案

【问题标题】：Position Label on top of text-area将标签放置在文本区域的顶部
【发布时间】：2013-05-12 05:47:17
【问题描述】：

我想以这张图片所示的格式将标签放置在 html 区域的顶部。我正在使用垂直对齐属性，但标签位于文本区域的左侧

使用的css代码是

textarea { vertical-align: top; }

请告诉我如何以图片中给出的格式定位标签..

【问题讨论】：

尝试发布的答案。

标签： html css forms layout

【解决方案1】：

试试这个代码：-

<label for="title">Title : </label>
<br/>
<textarea rows="5" id="title" name="title"></textarea>

运行Fiddle。

【讨论】：

【解决方案2】：

Demo

CSS：

label {display:block;}
textarea { display:block;}

HTML：

<label for="title">Title: </label>
<textarea rows="5" id="title" name="title"></textarea>

有很多方法可以实现您所需要的，但对于您提供的 sn-p 这已经足够了。

【讨论】：

很好的解决方案——我不知道为什么我以前从未想过。

【解决方案3】：

有一个名为 Fieldset 的标签可以满足您的要求。

<fieldset>
  <legend>Lable</legend>
  Data in the Box comes Here...!!
 </fieldset>

希望这是你想要的..!!

这里是演示http://jsfiddle.net/hZLhv/

【讨论】：

哇，谢谢@Sree ram。这太神奇了，我怎么不知道这么久！

【解决方案4】：

语义方法是使用 DL 和 DT。

<form>
    <dl>
        <dt><label for="title">Title : </label></dt>
        <dt><textarea rows="5" id="title" name="title"></textarea></dt>
    </dl>
</form>

FORM DL {
    display: inline-block;
    vertical-align: top;
}

【讨论】：

这是正确的吗？表格可以归类为“定义列表”？
它是一种设计选择。但重要的一点是内联周围有块级元素。