css:布局。左边图标右边文字(文字超出自动换行)

css:布局。左边图标右边文字(文字超出自动换行)_第1张图片

  1. 图标绝对定位通过top,left调整位置。右边文字div包裹(text-indent来调整与左边图标的距离)
    // 还适合这种考虑ie10兼容性的
    css:布局。左边图标右边文字(文字超出自动换行)_第2张图片
  2. 像这个第二个盒子有左边距,移动端可以用这种
    css:布局。左边图标右边文字(文字超出自动换行)_第3张图片
.col {
	display: flex
	.label{
	   display: flex;
       align-items: center;
       box-sizing: border-box;
       width: 0.97rem;
	}
	.val{
	   width: 1.88rem;
	}
}
	

// 两边固定宽度

你可能感兴趣的:(CSS)