中間有一個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