如何在 pre 标签内右对齐内部元素
Posted
技术标签:
【中文标题】如何在 pre 标签内右对齐内部元素【英文标题】：How to make right aligned inner element inside a pre tag 【发布时间】：2020-08-16 14:38:52 【问题描述】：我有一个应该仅通过 CSS/Query 解决的问题 - html 更改是不可能的，因为 HTML 是在网站上的数千个页面上实现的。
截图 (1)
如果宽度较小，它可以正常工作，但是当滚动条可见时，我将其向右移动以查看代码，然后“复制”按钮也向左移动，
截图 (2)
我使用脚本添加了复制按钮，它可以很好地处理数千个页面。无法解决问题。
HTML：
<pre class="i3-code">
--example code--
</pre>
脚本：
<script type="text/javascript">
function cpy(t)var e=t.innerText,n=document.createElement("textarea");n.setAttribute("class","invisible"),n.setAttribute("id","cpytxtbox"),n.textContent=e,document.body.append(n),n.select(),document.execCommand("copy"),document.getElementById("cpytxtbox").outerHTML=""var $input=$('<div class="copy-btn"><input type="button" value="Copy"/></div>');$input.prependTo($(".i3-code")),$(".copy-btn").click(function()cpy(this.parentElement));
</script>
CSS：
.i3-code
background-color: #fefbed;
font-size: 1em;
line-height: 1.2;
.copy-btn
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
.copy-btn input
background: #e1e1e1;
color: #000;
border: none;
font-weight: 500;
padding: 7px;
transition: background 1s;
可以使用此 URL（在任何示例代码上）进行实时测试，方法是调整窗口屏幕的大小
https://www.includehelp.com/python/date-toordinal-method-with-example.aspx
【问题讨论】：
【参考方案1】：这应该可以解决问题：
.copy-btn
text-align: right;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
margin-bottom: 5px;
background-color: #f4f4f4;
position: sticky;
top: -8px;
left: -8px;
right: -8px;
overflow: hidden;
它实现了position: sticky。
【讨论】：
哇 :) 谢谢，它正在工作，但我应该使用“位置：-webkit-sticky; /* Safari */” @ted 不使用 "position: -webkit-sticky; /* Safari */" - 它也可以在我的 iPhone11 上运行，所以请建议，它应该适用于所有浏览器 @Mike 是的，为 CSS3 规则添加供应商前缀总是一个好主意。position:sticky 没有 IE 支持。见：caniuse.com/#feat=css-sticky 如果你想支持所有浏览器，我建议找一个替代sticky。但现在至少你有了一个起点。【参考方案2】：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
</head>
<body>
<pre class="float-right position-sticky">
</pre>
</body>
</html>
【讨论】：
以上是关于如何在 pre 标签内右对齐内部元素的主要内容，如果未能解决你的问题，请参考以下文章