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网页布局实践分享

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:CSS图标文字对齐和表单输入框文字对齐兼容 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/icon-text-in-one-line.html)

发表评论

请登录后发表评论: