实现表单label两端对齐
主要使用css3属性
text-align: justify;
text-align-last: justify;
上代码:
<ul>
<li>
<label class="mark">用户名</label>
<div>
<input type="text" id="form-name" />
</div>
</li>
<li>
<label class="mark">验证码</label>
<div>
<input type="text" id="form-verifiy" />
</div>
</li>
<li>
<label class="mark">密码</label>
<div>
<input type="text" id="form-password" />
</div>
</li>
<li>
<label class="mark">确认密码</label>
<div>
<input type="text" id="form-sure_pass" />
</div>
</li>
</ul>
li { clear: both; list-style: none; } .mark { display: block; float: left; overflow: hidden; width: 78px; height: 29px; padding-right: 10px; text-align: justify; text-align-last: justify; } 效果展示:
实现表单label两端对齐的更多相关文章
- css 表单标签两端对齐
来自:http://demo.doyoe.com/css3/justify/justify-form.htm 侵删 <!DOCTYPE html> <html lang=" ...
- vue项目的elementui的form表单label的对齐方式和 el-date-picker 的长度设置
1.先按照官网的 :label-position 属性玩了一下毫无效果:发现单独使用这个属性是无效的,必须和 label-width 属性一起使用才生效: 如: <el-form :mod ...
- 基于div表单模拟右对齐
基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
- css实现表单label文字两端对齐
如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...
- vertical-align表单元素垂直对齐
原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...
- vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题
<el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...
- input、select等表单元素的对齐问题
今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...
- vue使用elementUI form表单label样式修改
更多关于修改ElementUI样式的方法,可以参考这篇文章 1.删除style标签中的 scoped 属性 <style lang="lang" scoped> ... ...
- antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
<a-form-item :label="label+'图片'" :label-col="{ span: 2 }" :wrapper-col=" ...
随机推荐
- 前端知识扫盲-VUE知识篇一(VUE核心知识)
最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...
- Docker容器时间与主机时间相差8小时
查看主机时间 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间 root@b43340ecf5ef:/# date Wed ...
- PHP yii2.0框架利用mpdf导出pdf
安装: composer require mpdf/mpdf 使用: use Mpdf\Mpdf;//(php7以前) //获取页面内容 $res = $this->controller-> ...
- 从源码学习使用 node-delegates
node-delegates 是 TJ 大神所写的一个简单的小工具,源码只有 157 行,作用在于将外部对象接受到的操作委托到内部属性进行处理,也可以理解为讲对象的内部属性暴露到外部,简化我们所需要书 ...
- hive基础指令
- Python之网络模型与图形绘制工具networkx
笔记 # https://www.jianshu.com/p/e543dc63454f import networkx as nx import matplotlib.pyplot as plt ## ...
- iOS启动图launchImage设置后在启动时无法显示
iOS设置启动图: 会发现运行APP不显示设置好的启动图 解决方法: 卸载之前运行的APP,检查以下配置,将LaunchScreen删除即可. 原因: launchImage 是在没有LaunchSc ...
- 50道Kafka面试题和解析(转载)
转载:https://zhuanlan.zhihu.com/p/78912551 前言 Apache Kafka的受欢迎程度很高,Kafka拥有充足的就业机会和职业前景.此外,在这个时代拥有kafka ...
- 【机器学习】Matlab中实现QQ-plot的一个好工具gqqplot
Matlab中实现QQ-plot的一个好工具gqqplot 26JUN June 26, 2013 这几天看了一下QQ-plot以及在Matlab中的实现,可是Matlab自带的qqplot函数不能满 ...
- Notepad++ 用法技巧
1 搜索技巧 [搜索中文]用正则表达式搜索:[一-龥] 2 用于SWIG语法的模板配置 notepad++是Windows平台上非常优秀的文本编辑器,速度快,功能强,还能自定义语言模板呢.很好用! 这 ...