"Anchor" button inside an adjacent pre
"Anchor" button inside an adjacent pre
我正在为我正在创建的编码博客设计样式，我正在尝试让复制按钮正常工作...
我希望两个复制按钮都与 pre 的顶部对齐，无论是否提供标签。如果它以某种方式 anchored 比 pre.
更好
最好将复制按钮移动到 pre 中（通过内联？）。即，与 pre 的右上角重叠。我不在乎它是否与 pre.
中的文本重叠
限制：我无法将任何 HTML 元素移入或移出 "org-src-container" div。我之前无法移动标签（没有编写额外的 lisp 代码，我想避免这种情况）。我可以在 "org-src-container" 块之前或之后进行任意更改。鉴于此 HTML 约束，我正在寻找 CSS（或 JS）解决方案。
如果样式更简单，我可以将复制按钮移到 "org-src-container" 之前，而不是之后。完全公开，我正在使用 Org 模式将 .org 标记文件发布到 HTML.
下面演示了我的问题。
.source-block {
display: flex;
align-items: center;
align-content: flex-start;
}
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
background: #0a0a0a;
color: #fafafa;
}
.copyBtn {
align-self: flex-start;
}
.org-src-container {
width: 100%;
}
<p>
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
</p>
<div class="source-block">
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
<pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
</div>
<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>
</div>
<p>
Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label. The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.
</p>
<div class="source-block">
<div class="org-src-container">
<pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
</div>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>
</div>
您可以调整您的 CSS 和 HTML 结构如下。主要变化是将外部容器（.org-src-container）设置为display: relative，将复制按钮设置为display: absolute。另外，我更改了 HTML 结构，以便容器内只有 <pre> 块和按钮。
.source-block {
}
pre {
padding: 8px; /* do not use "pt" in CSS */
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
background: #0a0a0a;
color: #fafafa;
}
.copyBtn {
position: absolute;
top: 1.2em;
right: 1.7em;
}
.org-src-container {
width: 100%;
position: relative;
}
<p>Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.</p>
<div class="source-block">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
<div class="org-src-container">
<pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>
</div>
</div>
<p>Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label. The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.</p>
<div class="source-block">
<div class="org-src-container">
<pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>
</div>
</div>
这是一个 CSS 唯一的解决方案，它将考虑两种情况（有或没有标签）
.source-block {
display: grid;
margin-top:0.5em;
}
.source-block .org-src-container,
.source-block button {
grid-row:1;
grid-column:1;
}
.source-block button {
margin: 1.5em 1.5em auto auto;
z-index: 1;
}
.source-block .org-src-container label {
display:block;
transform:translateY(-0.5em);
}
.source-block .org-src-container pre:not(:first-child) {
margin-top:0;
}
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
background: #0a0a0a;
color: #fafafa;
}
.copyBtn {
align-self: flex-start;
}
.org-src-container {
width: 100%;
}
<p>
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
</p>
<div class="source-block">
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
<pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
</div>
<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>
</div>
<p>
Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label. The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.
</p>
<div class="source-block">
<div class="org-src-container">
<pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
</div>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>
</div>
我正在为我正在创建的编码博客设计样式，我正在尝试让复制按钮正常工作...
我希望两个复制按钮都与 pre 的顶部对齐，无论是否提供标签。如果它以某种方式 anchored 比 pre.
更好最好将复制按钮移动到 pre 中（通过内联？）。即，与 pre 的右上角重叠。我不在乎它是否与 pre.
中的文本重叠限制：我无法将任何 HTML 元素移入或移出 "org-src-container" div。我之前无法移动标签（没有编写额外的 lisp 代码，我想避免这种情况）。我可以在 "org-src-container" 块之前或之后进行任意更改。鉴于此 HTML 约束，我正在寻找 CSS（或 JS）解决方案。
如果样式更简单，我可以将复制按钮移到 "org-src-container" 之前，而不是之后。完全公开，我正在使用 Org 模式将 .org 标记文件发布到 HTML.
下面演示了我的问题。
.source-block {
display: flex;
align-items: center;
align-content: flex-start;
}
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
background: #0a0a0a;
color: #fafafa;
}
.copyBtn {
align-self: flex-start;
}
.org-src-container {
width: 100%;
}
<p>
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
</p>
<div class="source-block">
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
<pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
</div>
<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>
</div>
<p>
Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label. The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.
</p>
<div class="source-block">
<div class="org-src-container">
<pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
</div>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>
</div>
您可以调整您的 CSS 和 HTML 结构如下。主要变化是将外部容器（.org-src-container）设置为display: relative，将复制按钮设置为display: absolute。另外，我更改了 HTML 结构，以便容器内只有 <pre> 块和按钮。
.source-block {
}
pre {
padding: 8px; /* do not use "pt" in CSS */
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
background: #0a0a0a;
color: #fafafa;
}
.copyBtn {
position: absolute;
top: 1.2em;
right: 1.7em;
}
.org-src-container {
width: 100%;
position: relative;
}
<p>Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.</p>
<div class="source-block">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
<div class="org-src-container">
<pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>
</div>
</div>
<p>Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label. The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.</p>
<div class="source-block">
<div class="org-src-container">
<pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>
</div>
</div>
这是一个 CSS 唯一的解决方案，它将考虑两种情况（有或没有标签）
.source-block {
display: grid;
margin-top:0.5em;
}
.source-block .org-src-container,
.source-block button {
grid-row:1;
grid-column:1;
}
.source-block button {
margin: 1.5em 1.5em auto auto;
z-index: 1;
}
.source-block .org-src-container label {
display:block;
transform:translateY(-0.5em);
}
.source-block .org-src-container pre:not(:first-child) {
margin-top:0;
}
pre {
padding: 8pt;
overflow: auto;
margin: 1.2em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
pre.src {
position: relative;
overflow: auto;
padding-top: 1.2em;
background: #0a0a0a;
color: #fafafa;
}
.copyBtn {
align-self: flex-start;
}
.org-src-container {
width: 100%;
}
<p>
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
</p>
<div class="source-block">
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
<pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
</div>
<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>
</div>
<p>
Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label. The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.
</p>
<div class="source-block">
<div class="org-src-container">
<pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
</div>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>
</div>