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-height来控制图标的文字和临近的文字同样行高，实现在同一行中。

2.表单输入框和内容对齐

简单的一个文字和文本输入

手机号*

CSS代码：

body{font:14px/1.42858 'microsoft yahei', arial, sans-serif; -webkit-font-smoothing: antialiased; } /*行高为20像素*/

.cell {

display: table-cell;

*display: inline-block;

width: 2000px;

*width: auto;

}

input.ui_input,

.ui_input > input {

height: 20px;

line-height: 20px;

padding: 9px 8px;

border: 1px solid #d0d0d5;

border-radius: 4px;

background-color: #fff;

font-size: 14px;

outline: none;

color: #545a6c;

-webkit-transition: border-color .15s, background-color .15s;

transition: border-color .15s, background-color .15s;

}

更多例子请看demo:http://www.zhangxinxu.com/study/201511/form-use-mpqq.html

参考文章：以20像素为基准的CSS网页布局实践分享