将textarea包裹在HTML元素周围 [英] Wrap the textarea around a HTML element

问题描述

有没有办法我可以包装一个textarea HTML元素在HTML元素？

这是我尝试实现的：

 标签名称：********* 
 ********************* 
 ********************* 
  

不能使用 code>< textarea> ，但您可以使用绝对定位将标签放在所需的位置。

使用 CSS text-indent 属性来偏移textarea的第一行，以使标签不重叠。

DEMO

 < ; div> 
< label>这是标签：< / label> 
< textarea cols =30rows =10>< / textarea> 
< / div> 
  

  div {
 position：relative; 
} 
 label {
 position：absolute; 
 top：0; 
 left：0; 
 border：1px solid＃000; 
 width：110px; 
} 
 textarea {
 text-indent：112px; 
 margin：0; 
} 
  

Is there any way I can wrap a textarea HTML element around a HTML element? In my case I want to wrap the textarea around the label.

This is what I try to achieve:

Label name: *********
*********************
*********************

Where the * is the text area.

解决方案

You can't use HTML tags inside <textarea> but you can use absolute positioning to place the label at the desired position.

Then, you can use the CSS text-indent property to offset the first line of the textarea so the label doesn't overlap it.

DEMO

HTML :

<div>
    <label>This is the label :</label>
    <textarea cols="30" rows="10"></textarea>
</div>

CSS :

div {
    position:relative;
}
label {
    position:absolute;
    top:0;
    left:0;
    border:1px solid #000;
    width:110px;
}
textarea {
    text-indent:112px;
    margin:0;
}

这篇关于将textarea包裹在HTML元素周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！