如何将 <p> 标签对齐到 <textarea> 的右上角？

Question

我在页面上有一个小textarea。在它旁边我有一个写着“HTML”的<p>标签。我想要的是将这个<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。

- Cannicide

---

你想让 p 元素出现在 textarea 区域内吗？ - Ouroborus

是的，我希望p元素出现在文本区域的右上角。 - Cannicide

可能是重复的问题：如何将父元素中的最后一个 div 放置在右上角？（CSS）[链接] - Martin Schneider

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>

- Gerrit0

---

虽然这是解决方案，但将HTML文本放在textarea之外并进行样式设置以达到0边距是否对OP更有益呢？这样用户就可以充分利用textarea而不会在行末时被HTML文本覆盖其代码。 - Optimae

未考虑用户可调整大小的文本区域。 - Ouroborus

我必须承认，这是一个非常好的解决方案，尽管它更多的是一种完成我所需的捷径。但是，是否有一种方法可以在保留代码不被标签覆盖的同时，在文本区域上面添加p标签？ - Cannicide

@IamGuest，仅使用CSS，我不认为有这种可能。通过一些JavaScript，可以在正确的位置插入换行符以避免此问题。 - Gerrit0

@Gerrit0 当然可以。其他有效的解决方案也可以很好地处理它。 - Ouroborus

Answer 2

你需要在 p 标签上设置 position:absolute，right 和 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>

- baao

---

我不明白为什么你要使用Javascript，而不是多用一点CSS，这样就可以得到一个正确处理页面调整大小的东西。 - Gerrit0

这个没问题，但是当用户调整文本框大小时，p标签不再保持在右上角，看起来非常奇怪。 - Cannicide

Answer 3

你需要一个相对父元素作为绝对定位的子元素的参考。

这个父元素应该包含标签（你可以使用 p 标签）和文本框，并且在它们上面缩小。

基本上可以像这样完成：

#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>

- G-Cyrillus

---

@IamGuest 不，它不行。你需要使用JavaScript来实现这个功能。 - G-Cyrillus