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

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

html 鼠标滑过后改变文字,html+CSS实例效果(1):鼠标滑过改变文字
blueidea ul.nav li{display:block;float:left;width:60px;height:30px;line-height:30px;padding:0 10px;} ...
表单title文字两端对齐（2、3、4个字都对齐）
表单title文字两端对齐(2.3.4个字都对齐) 文字两端对齐元素两端对齐 <style type="text/css">.word1{letter-spacing ...
html在表单左上角显示文字,js+css实现增加表单可用性之提示文字
平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: ...
html css图标怎么跟文字并排,科技常识：css图标与文字对齐的两种实现方法
今天小编跟大家讲解下有关css图标与文字对齐的两种实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css图标与文字对齐的两种实现方法的相关资料,希望小伙伴们看了有所帮助. 在平时 ...
css图标与文字同一列对齐与同一行对齐
同一列对齐:flex-direction:column; html: <view class="vol-meta-title"><text style=" ...
CSS+DIV-设置表格与表单
6-1.html <html> <head> <title>年度收入</title> <style> <!-- table{ ca ...
css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）
欢迎光临你好我是阿ken 文章目录 7.1_认识表单 7.1.1_表单的构成 7.1.2_创建表单 ( < form> 标记 ) 7.2_表单属性 1. action 属性 2. me ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

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

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

最新文章

热门文章