CSS图标文字对齐和表单输入框文字对齐兼容例子
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;
相关文章
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按...2015-10-23
- artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧...2016-04-19
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 在html表单提交中method请求Get和Post区别其实很显示的，get提交会是url形式的并且数据量不能太多，而post数据是在浏览器url看不到的并且可以是大数据量而且get安全性非...2016-09-20
- 有时候我们需要在登陆表单有一些提示语言，比如“请输入用户名”和“请输入密码”等语言，通过本文给大家介绍JavaScript实现输入框(密码框)出现提示语的相关知识，对js实现输入框提示相关知识感兴趣的朋友一起学习吧...2016-01-14
- 这篇文章主要介绍了微信小程序 PHP后端form表单提交实例详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下...2016-04-19- 这篇文章主要为大家详细介绍了C#自定义IP输入框控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 本文介绍在表单提交之前修改提交的值的方法，希望给需要的朋友一些帮助。...2016-04-17
- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15
- 一聚教程网 从零开始的html教程(7)，html表单的基础，零基础也能轻松学会html，希望大家喜欢 一、html的表单 表单负责网页中用户输入数据采集的功能，利用<form>标签来定...2016-12-31
- 本文主要分享了jquery实现输入框实时输入触发事件的代码，代码简单易懂，需要的朋友一起来看下吧...2017-01-09
- 这篇文章主要为大家详细介绍了JavaScript实现一个输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-12
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
从IE 10开始，type=”text” 的 input 在用户输入内容后，会自动产生一个小叉叉（X），方便用户点击清除已经输入的文本，下面通过本文给大家介绍下如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标...2017-01-09- 这篇文章主要介绍了VS2019使用快捷键将代码对齐的相关资料,非常不错对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-06-25
基于bootstrap插件实现autocomplete自动完成表单
这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单的相关资料，感兴趣的朋友可以参考一下...2016-05-09- 这篇文章主要介绍了jquery插件EasyUI中form表单提交实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-14