时间戳

首页 > 解决方案 > 我可以在 pre 旁边放置一个按钮吗？

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

问题描述

我有一些从文本编辑器宏生成的 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;
}

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

我可以用 CSS 实现这一点吗？我已经尝试了一些使用floatwith但没有成功的东西......考虑到宏限制:last-child，z-index这甚至可能吗（即，我不能轻易地将 HTML 放在这个src-container类中）？

谢谢！

标签： htmlcssbutton

解决方案

您可以使用 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>

推荐阅读