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：

import pandas as pd
import numpy as np

index = pd.MultiIndex.from_tuples([(0,0),(0,1),(1,0),(1,1)])
df = pd.DataFrame([[1],[2],[3],[4]] , index=index, columns=[0])

print df.unstack(level=[0])


   0   
   0  1
0  1  3
1  2  4