Html 将标签放置在文本区域的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16602594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position Label on top of text-area
提问by Lucy
I want to place label on top of an html area in the format shown in this picture.I am using vertical align property but the label is coming on the left hand side of the text-area
我想以这张图片中显示的格式将标签放在 html 区域的顶部。我正在使用垂直对齐属性，但标签位于文本区域的左侧
The current format i am getting is like this http://jsfiddle.net/aMLFE/
我得到的当前格式是这样的http://jsfiddle.net/aMLFE/
the css code being used is
正在使用的 css 代码是
textarea { vertical-align: top; }
Please tell me how to position label in the format given in the image..
请告诉我如何以图像中给出的格式定位标签。
回答by Arbel
Demo
演示
CSS:
CSS：
label {display:block;}
textarea { display:block;}
HTML:
HTML：
<label for="title">Title: </label>
<textarea rows="5" id="title" name="title"></textarea>
There are so many ways to achieve what you need, but for the snippet that you have provided this is sufficient.
有很多方法可以实现您的需求，但是对于您提供的代码片段，这已经足够了。
回答by JDGuide
回答by Sanjeev
The semantic approach is by using DL and DT.
语义方法是使用 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;
}
回答by Sree ram
There is a Tag Called FieldsetFor your requirement.
有一个名为Fieldset的标签可满足您的要求。
<fieldset>
<legend>Lable</legend>
Data in the Box comes Here...!!
</fieldset>
Hope this is what you want..!!
希望这是你想要的.. !!
Here is the demo http://jsfiddle.net/hZLhv/
