javascript - 按钮中间有一个字形，左上角有数字

Question

我正在尝试做一个类似数字键盘键的按钮，但在左下角有一个数字。它应该在中心有一个字形，下面是一个文本，左上角有一个小数字。 我不能把数字放在左上角，他总是站在字形的左边。

.btn-default{
    height: 8vh; 
        font-size: 12px;
      text-align: center;
}

.txt{
     font-size: 8px;
     color:blue;  
     right:0;
     top:0;
}

   <button type="button" id="buttonPlay" class="btn btn-default btn-lg text-center" ng-click="vid.playVideo()">
                 <span class="txt" > 8 </span>
                 <span class="glyphicon glyphicon-play"></span><br>Play
                <!-- <span class="tooltiptext">Play</span>-->
        </button>

我已经尝试了 margin 和 right: 0 和 top:0 但似乎没有任何效果，有帮助吗？

Answer 1

该元素将与positions 一起使用。将 position:relative 赋予 button 并将 position:absolute 赋予 txt 即可。

Here is the working code of what you need:

.btn-default{
   
        font-size: 12px;
      text-align: center;
      position:relative;
}

.txt{
     font-size: 12px;
     color:blue;  
     left:10px;
     top:0;
     position:absolute;
     color:red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="buttonPlay" class="btn btn-default btn-lg text-center" ng-click="vid.playVideo()">
                 <span class="txt" > 8 </span>
                 <span class="glyphicon glyphicon-play"></span><br>Play
                <!-- <span class="tooltiptext">Play</span>-->
        </button>