中间有一个glyphicon的按钮，左上角有一个数字

Question

我正在尝试做一个类似于数字键盘的按钮，但左上角有一个数字。 它的中心位置有一个glyphicon，下面是一个文本波纹管，左上角有一个小数字。 我不能将数字放在左上角，而他总是站在字形图标的左侧。

 .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

该元素将与position一起使用 。 给position:relative对于button和position:absolute相对于txt做到这一点。

这是您需要的工作代码：

 .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> 

Answer 2

只需使用从左到左浮动项目，从右到右浮动项目，并在按钮上使用填充以将对齐方式应用于按钮的元素。

Answer 3

您需要像这样为button和span元素提供位置：

  button { position:relative; } button span { display: block; position: absolute; top:0; left: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> 

Answer 4

您需要指定按钮的 position:relative和跨度的 position:absolute