html - 对齐 <textarea> 右上角的 标签？

Question

我的页面上有一个小文本区域。有了它，我就有了一个 <p>标有“HTML”的标签。我想要做的是对齐 <p>标记到文本区域的右上角，这样用户就会知道这个文本区域显示的是 HTML 代码。但是，我所有的尝试都放置了 <p>页面右上角的标签。

<div id="mycode">
   <p id="htmltag">HTML</p>
   <textarea id="htmlcode" style="background-color: #1e1e1e; color: #ffff66;">
      This is my HTML code
   </textarea>
</div>

我现在也愿意使用 Javascript，但不会使用 Jquery。

Answer 1

做起来相当简单。只需将 wrapper 设置为相对定位，然后您就可以将标签绝对定位在 wrapper 内。

正如@Optimae 所建议的，这里有一些 CSS 也可以防止 html 代码被标签遮挡。

#mycode {
  position: relative;
  display: inline-block; /* Allow horizontal resize */
  background: #fff;
  border: 1px solid rgb(169, 169, 169);
}

#htmltag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
}

#htmlcode {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: calc(100% - 1.2em);
  margin-top: 1.2em; /* prevents the code from going behind the label */
  outline: none; /* Prevents blue outline when focused */
}

<div id="mycode">
   <p id="htmltag">HTML</p>
   <textarea id="htmlcode">
      This is my HTML code
      
      With some more
      text
      to 
      force 
      scrolling
   </textarea>
</div>