如何像css技巧一样在textarea的右上角添加标题
[英]How to add a header in top right corner of a textarea like in css tricks
问题描述
I have made a textarea but I want tomake a header writing " HTML " in the top right corner in small letters like css-tricks .
我制作了一个 textarea，但我想制作一个标题，在右上角用css-tricks等小写字母书写“ HTML ”。
My code:我的代码：
<code><pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Button Ripple Effect | #Programmer</title>
</head>
<body>
<div class="wrapper">
<div class="btns">
<a href="#">Button 1</a>
<a href="#">Button 2</a>
</div>
</div>
</body>
</html>
</textarea></pre></code>
3 个解决方案
解决方案1
1 2021-09-26 05:03:55
Just need a bit of CSS.只需要一点CSS。 You may want to use a class selector instead, though.不过，您可能想改用类选择器。
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;"> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Button Ripple Effect | #Programmer</title> </head> <body> <div class="wrapper"> <div class="btns"> <a href="#">Button 1</a> <a href="#">Button 2</a> </div> </div> </body> </html> </textarea></pre>
解决方案2
1 2021-11-11 18:57:13
It's easy if you remove textarea element.如果您删除 textarea 元素，这很容易。 Because I think you don't need it.因为我认为你不需要它。 To do that:要做到这一点：
- Add a
spantag before any code.在任何代码之前添加一个span标签。 - Optional: Add (an
id|| aclass)可选：添加（一个id|| aclass） - Write Html in
spantag.在span标签中写入 Html。 - In CSS set
codetag'spositiontorelative在 CSS 中将code标签的position为relative - In CSS set
spantag'spositiontoabsolute在 CSS 中将span标签的position为absolute - Style the span For example:样式跨度 例如：
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;
- Then set it's position to right top corner:然后将其位置设置为右上角：
top: 5px;
right: 5px;
transform: translate(-50%, -50%);
- Your Done!你完成了！
Note: If you are unfamiliar with some of the top propersties search cssthat property.注意：如果您不熟悉某些顶级属性，请搜索 css that property。
For exampleCSS outline例如CSS outline
The final:决赛：
<pre><code>
<span class="tag">HTML</span>
<!-- Your codes -->
</code></pre>
And:和：
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
0 2021-09-26 05:27:35
You should learn a CSS Grid Layout Module .你应该学习一个CSS Grid Layout Module 。
Here you have A Complete Guide to Grid .在这里你有一个完整的网格指南。
In this use case, a CSS Grid is a bit like "Shooting birds with a cannon" but it is a great CSS tool that I am certain that you should learn and you will be grateful that you did.在这个用例中，CSS 网格有点像“用大炮射鸟”，但它是一个很棒的 CSS 工具，我相信你应该学习它，你会很感激你这样做了。
It will eliminate such problems with positioning elements like in the GIF below:它将消除定位元素的此类问题，如下面的 GIF 所示：
I assume that You want to achieve a similar effect like in this snippet:我假设你想达到类似这个片段的效果：
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>
For future posts please add more info on what did you tried to achieve your goal and maybe add a sketch picture created eg.对于以后的帖子，请添加有关您尝试实现目标的方法的更多信息，并可能添加创建的草图图片，例如。 in Paint or handmade.在油漆或手工制作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.