自定義按鈕扭曲的SPAN標籤

Question

我必須在一行中生成自定義按鈕。問題是，當我將按鈕類放在「span」標籤內時，按鈕形狀從圓形變爲橢圓形。如果我將它放在「div」標籤內，它會顯示正常，但不能連續顯示。

這裏是我的CSS：

.dashboard-button-green{ 
    height: 27px; 
    width: 27px; 
    background-color: #72a017; 
    border-radius: 50%; 
    text-align:center; 
    text-decoration:none; 
    font-size: 8pt; 
    font-weight:bold; 
    margin: 5px 10px 5px 5px; 
    top:10px; 
    padding-top: 12px; 
    padding-left: 10px; 
    padding-right: 2px; 
    color:white; 
} 

這裏是我的HTML：

<div ng-app="myModule" ng-controller="ContractorCtrl"> 


      <span class="dashboard-button-green">70%</span> <span><img src="~/Images/ContractorWidget/red_cross.png" /></span> 





     </div> 

這是怎麼呈現：

左邊的圖像看起來應該就像右邊的圖片一樣。我試圖改變行高，但它沒有幫助。

任何援助非常感謝！

Answer 1

這是因爲span標籤是內聯的。您需要將display: inline-block添加到您的範圍以表現得更像一個按鈕。

Answer 2

您可以添加到您的CSS：

span{ 
    display:block; 
}