Question

我正在创建键盘。我很想知道如何在中间和左上角都有一个带字母的按钮？现在，我可以一个接一个。任何帮助将不胜感激。预先谢谢你。

    <button name = "Q" id = "alphabet"> Q &#x1107</button>
    <button name = "Q" id = "alphabet"> W &#x110C </button>
    <button name = "Q" id = "alphabet"> E &#x1103</button>
    <button name = "Q" id = "alphabet"> R &#x1100</button>
    <button name = "Q" id = "alphabet"> T &#1109</button>

Answer 1

相对于按钮定位两个跨度。跨度之一将字母放在中间，另一个将字母保持在左上方。比将跨度绝对移动到所需位置更重要。

button {
  width: 50px;
  height:30px;
  position: relative;
}
button > .middle {
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
}

button > .top-left {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10px;
  height: 10px;
}

<button>
<span class="middle">M</span>
<span class="top-left">T</span>
</button>

Answer 2

我认为您想像这样显示按钮值：“ ^q Q ”。
如果您的意思是，请在html中使用<sup>。因此您的代码应为：

 <button name = "Q" id = "alphabet"><sup>q</sup> Q </button>

希望这可以解决您的问题。

按钮上不同位置的文字

2 个答案: