Question

我有一些从文本编辑器宏生成的HTML。输出看起来像这样：

<div class='source-block'>

  <div class="src-container">
    <pre class="src bash">sudo apt update</pre>
  </div>

  <button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>

</div>

到目前为止，我目前唯一应用于所有这些元素的CSS都在pre上：

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;
}

我正在尝试将copyBtn直接放在<pre>的右侧。由于该文本编辑器宏的工作方式，我无法将按钮{em> 放在src-container中，该按钮是“自动”生成的。但是，我可以在src-container div之前或之后移动按钮。

我可以用CSS实现吗？我已经尝试过将float与:last-child和z-index一起使用，但是没有成功...鉴于宏的限制，这是否有可能（即，我无法轻易地将HTML放在此{{ 1}}类）？

谢谢！

Answer 1

您可以使用flexbox在source-block（父级）中定位子元素的流。您可以使用它使它们彼此相邻并使用align-items: center;

定位垂直位置

更多有关flexbox的信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

我可以使用Flexbox（浏览器支持）： https://caniuse.com/#feat=flexbox

/* changed CSS */
.source-block {
  display: flex;
  align-items: center;
  align-content:flex-start;
}

/* provided CSS*/
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;
}

/* misc styling */
.copyBtn {
  margin-top: 2px;
}

<div class="source-block">

  <div class="src-container">
    <pre class="src bash">sudo apt update</pre>
  </div>

  <button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>

</div>

Answer 2

设置所有名为src-container的类。

<style>
  .src-container {
    dispay:inline;
  }
</style>

或者，设置单个按钮。

  button[name="******"] {
  position: absolute;
}

Answer 3

一个简单的解决方案是使用float：在src容器上向左移动，以使按钮移到它的右侧。您还可以在copyBtn上使用float：right。这些使块元素彼此相邻。

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;
}
.src-container {
  float: left
}

<div class='source-block'>

  <div class="src-container">
    <pre class="src bash">sudo apt update</pre>
  </div>

  <button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>

</div>

Answer 4

最简单的解决方案：将按钮移到.src-container之前并使其浮动。

.copyBtn {
    float: right;
}

第二个解决方案：不需要移动按钮，只需将其绝对定位，然后将顶部位置调整到您认为合适的位置即可。唯一的要求就是确保包含所有这些元素的元素（通常为body）应该设置为position（通常这样，但并非总是如此）。

.copyBtn {
    position: absolute;
    top: 10px; right: 10px;
}

还有一些更高级的技术，例如自动对齐按钮，但是由于您的布局是众所周知的，因此这足以满足您的目的。

我可以在按钮旁边放置一个按钮吗？

4 个答案: