Html SPAN标记中的自定义按钮扭曲

我必须在一行中生成自定义按钮。问题是，当我将button类放在“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>

70% 

它是这样呈现的：

左边的图像应该看起来像右边的图像。我试着改变线的高度，但没用

---

非常感谢您的帮助

这是因为span标记是内联的。您需要在span中添加

display:inline块

，使其更像一个按钮

您可以将此添加到css中：

span{
    display:block;
}

---

谢谢这正是我需要的！块元素扩展到可用空间，之后没有测试。如果需要按钮，应使用

内联块

。这是浏览器默认用于按钮的样式。另外，您不应该像答案中提到的代码那样设置所有span标记的样式。这将更改所有跨度标记的行为。谢谢！这正是我需要的！