html - 将标签放置在文本区域的顶部

Question

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

我得到的当前格式是这样的http://jsfiddle.net/aMLFE/

正在使用的 CSS 代码是

textarea { vertical-align: top; }

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

Answer 1

演示

CSS：

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

HTML：

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

有很多方法可以实现您所需要的，但是对于您提供的代码片段，这已经足够了。

Answer 2

试试这个代码： -

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

运行小提琴。

Answer 3

根据您的要求，有一个名为Fieldset的标签。

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

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

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

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