html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容

张鑫旭的一篇文章，讲到20像素图标对齐和表单元素40像素对齐有所收获，谢谢@张鑫旭 ，很多观点跟平时的处理方式不谋而合，一般来说，我处理图标如果临近的话都会使用同样宽高，然后使用inline-block比较多，表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充。

以下摘录部分原文中的实践代码。

1.图标和文字对齐

一般的图标和文字对齐HTML代码：

前端开发博客

删除前端开发博客

zxx的CSS代码：

p{line-height:20px; font-size:14px;}

.icon {

display: inline-block;

width:20px; height:20px;

background: ...;

white-space:nowrap;

letter-spacing: -1em;

text-indent: -99em;

color: transparent;

/* IE7 */

*text-indent: 0;

*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '3000');

}

.icon:before {

/* 伪元素插入空格文本 */

content: '3000';

}

这个代码主要是通过line-