【解决方案】CSS 给 label 设置宽高无效

如图，我的代码是这样的：

html中：

 <label class="statusCheck0">订</label> 

 <label class="statusCheck1">馆</label> 

css中：

.statusCheck0 , .statusCheck1{
    color: white;
    width: 20px ;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
}

.statusCheck0 {
    background-color: #18D9A3;
    margin-right: 8px;
}

.statusCheck1 {
    background-color: #FF4561;
}

显然，我设置的宽高完全无效。

原因：label是inline元素，定义宽度和高度都是无效的。

解决方法：加一句 display: inline-block; 或者 display: block; （后者会自动换行）

.statusCheck0 , .statusCheck1{
    display: inline-block;
    color: white;
    width: 20px ;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
}

效果：

转载于:https://www.cnblogs.com/fifteen718/p/9533933.html