在 <textarea> 的右上角对齐 <p> 标签？

Question

我的页面上有一个小文本区域。有了它，我就有了一个<p> 标签，上面写着“HTML”。我想要做的是将 <p> 标记与 textarea 的右上角对齐，这样用户就会知道这个 textarea 显示 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

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

正如@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>

Answer 2

你需要在p标签上设置position:absolute, right and top。然后删除浏览器特定的边距和填充。要使其适应文本框大小，请使用 javascript 动态设置宽度。 DEMO

document.getElementById('mycode').style.width = document.getElementById('htmlcode').getBoundingClientRect().width + 'px';

#mycode {
  position: relative;
  padding:0;
}
#htmltag {
  position: absolute;
  right: 0;
  top:0;
  color: red;
  z-index:1;
  padding:0;
  margin:0;
}

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

Answer 3

你需要一个相对的父母作为绝对孩子的参考。

这个父级应该把label（你用p）和textarea放在一起并缩小它。

基本上可以这样：

#mycode {
  position: relative;
  /* be reference for positionning clidren*/
  display: table;
  /* shrinks/expands with content could be also inline-block/table/flex*/
}
#htmltag {
  margin: 0;
  right: 1.2em;
  /* stay away from scrollbar*/
  position: absolute;
  color: gray;
}
textarea {
  background-color: #1e1e1e;
  color: #ffff66;
  padding-top: 1.2em;/* clear some space to show the label*/

<div id="mycode">
  <label for="htmlcode" id="htmltag">HTML</label>
  <textarea id="htmlcode" placeholder="HTML">
    This is my HTML code, resize me boxe
  </textarea>
</div>