CSS圖標文字對齊和表單輸入框文字對齊兼容

張鑫旭的一篇文章,講到20像素圖標對齊和表單元素40像素對齊有所收獲,謝謝@張鑫旭 ,很多觀點跟平時的處理方式不謀而合,一般來說,我處理圖標如果臨近的話都會使用同樣寬高,然后使用inline-block比較多,表單輸入框和按鈕以line-height:21-22為準。然后超出的用padding來補充。 以下摘錄部分原文中的實踐代碼。

1.圖標和文字對齊

一般的圖標和文字對齊HTML代碼:
<p><i class="icon"></i>前端開發博客</p>

<p><a href="javascript:" class="icon">刪除</a>前端開發博客</p>
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.表單輸入框和內容對齊

簡單的一個文字和文本輸入
<div class="clearfix mt15">
<label class="left">手機號<span class="red abs">*</span></label>
<div class="cell">
<input type="tel" class="ui_input" name="tel" required="">
</div>
</div>
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網頁布局實踐分享