Css
文字前面加图标
如上图所示,是要实现的目标
看似简单,但实际图标比文字大,如果什么都不做,那么会是底端对齐,如图所示
使用flex布局,上下可以对齐,但是多行的时候,会跟多行对齐,会是这样子的:
display: flex;
align-items:center;
最后是使用图标绝对定位+文字padding-left实现
#home-store-list .store-item .store-tel {
position:relative;
font-size: 12px;
}
#home-store-list .store-item .store-tel span {
padding-left: 18px;
}
#home-store-list .store-item .store-address {
position: relative;
color: #969799;
font-size: 12px;
}
#home-store-list .store-item .store-address span {
padding-left: 18px;
}
.icon {
width: 13px;
height: 14px;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
position:absolute;
top:4px;
left:0px;
}
.icon-addr {
background-image: url(/Crm/home/WxWorkGroup/icon-addr.png);
}
.icon-tel {
background-image: url(/Crm/home/WxWorkGroup/icon-tel.png);
}