主要使用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两端对齐的更多相关文章

  1. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  2. vue项目的elementui的form表单label的对齐方式和 el-date-picker 的长度设置

    1.先按照官网的  :label-position  属性玩了一下毫无效果:发现单独使用这个属性是无效的,必须和  label-width 属性一起使用才生效: 如: <el-form :mod ...

  3. 基于div表单模拟右对齐

    基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...

  4. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

  5. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  6. vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题

    <el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...

  7. input、select等表单元素的对齐问题

    今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...

  8. vue使用elementUI form表单label样式修改

    更多关于修改ElementUI样式的方法,可以参考这篇文章 1.删除style标签中的 scoped 属性 <style lang="lang" scoped> ... ...

  9. antd-vue中的form表单label标签for导致点击文字触发输入框解决方案

    <a-form-item :label="label+'图片'" :label-col="{ span: 2 }" :wrapper-col=" ...

随机推荐

  1. vscode 设置 eclipse 快捷键

    点击安装之后,默认就是要ecliplse快捷键了 注意:部分快捷键可能会由于和原来的冲突而失效,例如快速在“下面插入行” ,我还是不能使用ecliplse的Shift+Enter,而要用Ctrl+En ...

  2. [z]curl使用指南

    https://www.jianshu.com/p/fc0eb6c60816 curl -X POST "http://aa/bb/cc" -H  "accept:*/* ...

  3. Linux命令对应的英文全称【转载】

    su:Swith user  切换用户,切换到root用户cat: Concatenate  串联uname: Unix name  系统名称df: Disk free  空余硬盘du: Disk u ...

  4. [Kaggle] How to handle big data?

    上一篇,[Kaggle] How to kaggle?[方法导论] 这里再做一点进阶学习. 写在前面 "行业特征" 的重要性 Ref: Kaggle2017—1百万美金的肺癌检测竞 ...

  5. 【C# in depth 第三版】温故而知新(1) (转)

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...

  6. Kettle实现从mysql中取2张表数据关联的数据,并写入到mongodb中

    1 建立转换,并设置DB连接到mysql 选中DB连接:连接类型选择MySQL,输入主机名称,数据库名称,端口号,用户名,密码 输入连接名称,点击确定.(可以先点击测试,测试一下是否连接成功) 如下图 ...

  7. LNK2019 无法解析的外部符号 该符号在函数 _main 中被引用

    学习严蔚敏的数据结构,使用vc6新建项目,文件名分别如下: SequenceStack.cpp SequenceStack.h Status.h TestCase.c 报错如下: xilink6: e ...

  8. 拒绝LOW ---青鸟影院购票系统

    1.首先我们需要了解这个软件的功能: 1).影院每天更新放映列表,系统支持实时查看,包括电影放映场次的时间: 2).影院提供三类影票:普通票,学生票和赠票: 3).允许用户查看某场次座位的售出情况: ...

  9. unity+android权限--打开应用不弹权限,动态请求权限

    因为笔者之前的游戏需要分享图片,会请求外部储存,第一次打开游戏就会出现弹窗: 很多人对这个很敏感,怕你访问到他们的照片隐私,看到这个权限就拒绝,甚至卸载,实际上我们只是想截屏游戏内容分享给其他玩家,但 ...

  10. 使用mysqldump对mysql进行备份与恢复

    说明: 主参考:https://blog.csdn.net/fanren224/article/details/79693860 mysql数据全量备份 1.开启二进制日志,备份指定数据库 cat & ...