如何像css技巧一样在文本区域的右上角添加标题答案

【问题标题】：How to add a header in top right corner of a textarea like in css tricks如何像css技巧一样在文本区域的右上角添加标题
【发布时间】：2021-09-26 04:45:06
【问题描述】：

我已经创建了一个文本区域，但我想在右上角用 css-tricks 之类的小写字母创建一个标题为“HTML”。

我的代码：

<code><pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title>Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></pre></code>

【问题讨论】：

标签： html css textarea

【解决方案1】：

只需要一点 CSS。不过，您可能希望使用类选择器。

pre {
    position: relative;
    display: inline-block;
}

pre::before {
    position: absolute;
    top: 10px;
    right: 10px;
    content: "HTML"
 }

<pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title>Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></pre>

【讨论】：

【解决方案2】：

如果您删除 textarea 元素，这很容易。因为我认为你不需要它。为此：

在任何代码前添加span 标签。
可选：添加（id || class）
在span标签中写入Html。
在 CSS 中将 code 标签的 position 设置为 relative
在 CSS 中将 span 标签的 position 设置为 absolute
样式跨度例如：

background: hsla(0, 0%, 0%, 0.3);
color: white;
padding: 6px 8px;
border: none;
outline: none;
/* Below gives it full round corners */
border-radius: 999px;

然后将其位置设置为右上角：

top: 5px;
right: 5px;
transform: translate(-50%, -50%);

大功告成！
注意：如果您不熟悉一些顶级属性，请搜索 css that property。
例如CSS outline

决赛：

<pre><code>
<span class="tag">HTML</span>
<!-- Your codes -->
</code></pre>

还有：

pre > code {
  position: relative;
}
.tag {
  position: absolute;
  top: 5px;
  left: 5px;
  transform: translate(-50%, -50%);
  color: white;
  background: hsla(0, 0%, 0%, 0.3);
  padding: 6px 8px;
  font: 300 10px sans-serif;
  border: none;
  outline: none;
  border-radius: 999px;
}

【讨论】：

【解决方案3】：

你应该学习CSS Grid Layout Module。

这里有A Complete Guide to Grid。

在这个用例中，CSS Grid 有点像“用大炮射鸟”，但它是一个很棒的 CSS 工具，我相信你应该学习它，你会很感激你学习的。

它将消除定位元素的此类问题，如下面的 GIF 所示：

我假设你想达到类似这个 sn-p 的效果：

header {
    display: grid;
    justify-items: end;
}

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button Ripple Effect | #Programmer</title>
</head>

<body>
<header>
    <span class="logo">HTML</span>
</header>

<div class="wrapper">
    <div class="btns">
        <a href="#">Button 1</a>
        <a href="#">Button 2</a>
    </div>
</div>
</body>
</html>

对于以后的帖子，请添加更多信息，说明您为实现目标所做的努力，并可能添加创建的草图，例如。用油漆或手工制作。

【讨论】：