css - 如何跨越两个按钮的文本

Question

我有一个包含两个按钮的 Bootstrap 按钮组，我希望一些文本跨越两个按钮。

它们是减少和增加按钮。所以我在两个按钮上都有文本“对比度”，一个按钮上有一个“-”，另一个按钮上有一个“+”。

我在上面覆盖了(？)一个带有所需文本的 div，并使用“pointer-events:none”让它工作——但我需要它在不支持指针的旧浏览器 (IE 10) 上工作——事件。

是否有替代/更好的方法？？

  <div class="btn-group">
    <div style="position:absolute;top:5px;left:3px;text-align:center;width:100%;color:white;z-index:300;pointer-events: none;">
      <i style="left-padding:2px;vertical-align: middle;" class="fa fa-adjust fa-2x"></i>
      <div style="display:inline;top: 2px;position: relative;">Contrast</div>
    </div>
    <button type="button" class="btn">
      <br>&nbsp;<br>-
    </button>
    <button type="button" class="btn">
      <br>&nbsp;<br>+
    </button>
  </div>

Answer 1

最后我改变了设计，使按钮分开，并且没有使用跨越两个按钮的词。