Question

＆lt; p＆gt;我的页面上有一个小文本区域。有了它，我有＆lt; code＆gt;＆lt; p＆gt;＆lt; / code＆gt;标签上写着＆＃34; HTML＆＃34;。我想要做的是对齐＆lt; code＆gt;＆lt; p＆gt;＆lt; / code＆gt;标记到textarea的右上角，因此用户将知道此textarea显示HTML代码。但是，我的所有尝试都放置了＆lt; code＆gt;＆lt; p＆gt;＆lt; / code＆gt;标记在页面的右上角。＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt;＆lt; div id =＆＃34; mycode＆＃34;＆gt; ＆lt; p id =＆＃34; htmltag＆＃34;＆gt; HTML＆lt; / p＆gt; ＆lt; textarea id =＆＃34; htmlcode＆＃34; style =＆＃34; background-color：＃1e1e1e;颜色：#ffff66;＆＃34;＆gt; 这是我的HTML代码＆LT; / textarea的＆GT; ＆LT; / DIV＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;我现在也愿意使用Javascript，但没有Jquery。＆lt; / p＆gt;

Answer 1

相当简单。只需将您的包装设置为相对定位，然后您就可以将标签放在包装内。

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

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

Answer 2

您需要在position:absolute标记的右侧和顶部设置p。然后删除浏览器特定的边距和填充。要使其适应文本框大小，请使用javascript动态设置宽度。 DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

这个父母应该持有标签（你使用p）和textarea并缩小它。

基本上可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: