Html &引用；“锚定”；按钮位于相邻的pre

我正在为我正在创建的一个编码博客设计样式，我正在尝试让复制按钮正常工作

我希望两个复制按钮都与pres的顶部对齐，无论是否提供标签。如果它以某种方式锚定到pre，则会更可取

最好将复制按钮移动到pres（通过内联？）中。i、 例如，与pre的右上角重叠。我不在乎它是否与pre中的文本重叠

限制：我无法将任何HTML元素移入或移出“org src container”divs。我以前无法移动标签（如果不编写附加的

lisp

code，我希望避免这样做）。我可以在“org src container”块之前或之后进行任意更改。我正在寻找一个CSS（或JS）解决方案，考虑到这个HTML约束

如果样式设置更容易，我可以将复制按钮移到“org src container”之前，而不是之后。完全公开，我正在使用Org模式将.Org标记文件发布到HTML中

下面说明我的问题

。源代码块{
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
}
前{
填充：8pt；
溢出：自动；
边缘：1.2米；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
}
前src{
位置：相对位置；
溢出：自动；
垫面：1.2米；
背景：#0a0a；
颜色：#fafafa；
}
.copyBtn{
自我校准：灵活启动；
}
.org src容器{
宽度：100%；
}

这里是表示文件内容的源代码块。因此，我将包含一个带有文件名的标签。复制按钮[大致]与标签行对齐。这太高，看起来像是在复制文件名。

清单1：示例_file.sh
#!/bin/bash
回音“第1行”
回音“第2行”
回音“第三行”
回音“第4行”
回音“第5行”
回音“第6行”
回音“第7行”
回音“第8行”
回音“第9行”
复制

这是一个源代码块，用于传递要交互运行的命令。因此，没有文件名，我省略了标签。复制按钮[大致]与源块的第一行对齐。这几乎是我想要的，除了它没有重叠的前。

回显“命令1”
回显“命令2”
回显“命令3”
回显“命令4”
回显“命令5”
回显“命令6”
回显“命令7”
回显“命令8”
回声“命令9”
复制

您可以如下调整CSS和HTML结构。主要更改是将外部容器（

.org src container

）设置为

display:relative

，将复制按钮设置为

display:absolute

。另外，为了只包含

这里是表示文件内容的源代码块。因此，我将包含一个带有文件名的标签。复制按钮[大致]与标签行对齐。这太高，看起来像是在复制文件名

清单1：示例_file.sh
#!/bin/bash
回音“第1行”
回音“第2行”
回音“第三行”
回音“第4行”
回音“第5行”
回音“第6行”
回音“第7行”
回音“第8行”
回音“第9行”
复制
这是一个源代码块，用于传递要交互运行的命令。因此，没有文件名，我省略了标签。复制按钮[大致]与源块的第一行对齐。这几乎是我想要的，除了它没有重叠的前

回显“命令1”
回显“命令2”
回显“命令3”
回显“命令4”
回显“命令5”
回显“命令6”
回显“命令7”
回显“命令8”
回声“命令9”
复制
<代码> > P>这里是一个CSS唯一的解决方案，它将考虑两种情况（有或没有标签）


。源代码块{
显示：网格；
边缘顶部：0.5em；
}
.source block.org src容器，
.源块按钮{
网格行：1；
网格柱：1；
}
.源块按钮{
利润率：1.5em 1.5em自动；
z指数：1；
}
.source block.org src容器标签{
显示：块；
变换：translateY（-0.5em）；
}
.source block.org src container pre:not（：第一个子级）{
边际上限：0；
}
前{
填充：8pt；
溢出：自动；
边缘：1.2米；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
}
前src{
位置：相对位置；
溢出：自动；
垫面：1.2米；
背景：#0a0a；
颜色：#fafafa；
}
.copyBtn{
自我校准：灵活启动；
}
.org src容器{
宽度：100%；
}

这里是表示文件内容的源代码块。因此，我将包含一个带有文件名的标签。复制按钮[大致]与标签行对齐。这太高，看起来像是在复制文件名。

清单1：示例_file.sh
#!/bin/bash
回音“第1行”
回音“第2行”
回音“第三行”
回音“第4行”
回音“第5行”
回音“第6行”
回音“第7行”
回音“第8行”
回音“第9行”
复制

这是一个源代码块，用于传递要交互运行的命令。因此，没有文件名，我省略了标签。复制按钮[大致]与源块的第一行对齐。这几乎是我想要的，除了它没有重叠的前。

回显“命令1”
回显“命令2”
回显“命令3”
回显“命令4”
回显“命令5”
回显“命令6”
回显“命令7”
回显“命令8”
回声“命令9”
复制
不要混合使用双引号和单引号；另外，请用引号将所有属性值括起来。最后，你的按钮名字很奇怪，为什么？事实上，我没有改变里面任何东西的自由。i、 例如，我不能在之前移动
标签
（不写额外的
lisp
代码。有没有
css
解决方案？我更新了