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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:27:40  来源:igfitidea点击:

Position Label on top of text-area

htmlcssformslayout

提问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 desired format

所需的格式

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

Try this code :-

试试这个代码:-

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

Run Fiddle.

运行小提琴

回答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/

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