【解决方案】CSS 给 label 设置宽高无效_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;
}

 

效果:

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