实现表单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=" ...
随机推荐
- vscode 设置 eclipse 快捷键
点击安装之后,默认就是要ecliplse快捷键了 注意:部分快捷键可能会由于和原来的冲突而失效,例如快速在“下面插入行” ,我还是不能使用ecliplse的Shift+Enter,而要用Ctrl+En ...
- [z]curl使用指南
https://www.jianshu.com/p/fc0eb6c60816 curl -X POST "http://aa/bb/cc" -H "accept:*/* ...
- Linux命令对应的英文全称【转载】
su:Swith user 切换用户,切换到root用户cat: Concatenate 串联uname: Unix name 系统名称df: Disk free 空余硬盘du: Disk u ...
- [Kaggle] How to handle big data?
上一篇,[Kaggle] How to kaggle?[方法导论] 这里再做一点进阶学习. 写在前面 "行业特征" 的重要性 Ref: Kaggle2017—1百万美金的肺癌检测竞 ...
- 【C# in depth 第三版】温故而知新(1) (转)
声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...
- Kettle实现从mysql中取2张表数据关联的数据,并写入到mongodb中
1 建立转换,并设置DB连接到mysql 选中DB连接:连接类型选择MySQL,输入主机名称,数据库名称,端口号,用户名,密码 输入连接名称,点击确定.(可以先点击测试,测试一下是否连接成功) 如下图 ...
- LNK2019 无法解析的外部符号 该符号在函数 _main 中被引用
学习严蔚敏的数据结构,使用vc6新建项目,文件名分别如下: SequenceStack.cpp SequenceStack.h Status.h TestCase.c 报错如下: xilink6: e ...
- 拒绝LOW ---青鸟影院购票系统
1.首先我们需要了解这个软件的功能: 1).影院每天更新放映列表,系统支持实时查看,包括电影放映场次的时间: 2).影院提供三类影票:普通票,学生票和赠票: 3).允许用户查看某场次座位的售出情况: ...
- unity+android权限--打开应用不弹权限,动态请求权限
因为笔者之前的游戏需要分享图片,会请求外部储存,第一次打开游戏就会出现弹窗: 很多人对这个很敏感,怕你访问到他们的照片隐私,看到这个权限就拒绝,甚至卸载,实际上我们只是想截屏游戏内容分享给其他玩家,但 ...
- 使用mysqldump对mysql进行备份与恢复
说明: 主参考:https://blog.csdn.net/fanren224/article/details/79693860 mysql数据全量备份 1.开启二进制日志,备份指定数据库 cat & ...