将标签置于文本区域的顶部

Question

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

我得到的当前格式如下http://jsfiddle.net/aMLFE/

正在使用的css代码是

textarea { vertical-align: top; }

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

Answer 1

Demo

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>

运行Fiddle。

Answer 3

语义方法是使用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;
}

Answer 4

标记为 Fieldset 符合您的要求。

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

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

以下是演示http://jsfiddle.net/hZLhv/