html - 将 textarea 包裹在 HTML 元素周围

Question

有什么方法可以将 textarea HTML 元素包裹在 HTML 元素周围？在我的例子中，我想将文本区域包裹在标签周围。

这是我努力实现的目标:

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

其中 * 是文本区域。

Answer 1

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

然后，您可以使用 CSS text-indent属性 ( more info on MDN ) 来偏移文本区域的第一行，这样标签就不会与它重叠。

div {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 115px;
  line-height: 1em;
}

textarea {
  text-indent: 120px;
  margin: 0;
  line-height: 1.2em;
}

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