CSS图标文字对齐和表单输入框文字对齐兼容例子

1.图标和文字对齐

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

前端开发博客

javascript:" class="icon">删除前端开发博客

zxx的CSS代码：

p{line- font-size:14px;}
.icon {
    display: inline-block;
   
    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: auto;
}
input.ui_input,
.ui_input > input {

line-
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;