主要使用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. 前端知识扫盲-VUE知识篇一(VUE核心知识)

    最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...

  2. Docker容器时间与主机时间相差8小时

    查看主机时间 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间 root@b43340ecf5ef:/# date Wed ...

  3. PHP yii2.0框架利用mpdf导出pdf

    安装: composer require mpdf/mpdf 使用: use Mpdf\Mpdf;//(php7以前) //获取页面内容 $res = $this->controller-> ...

  4. 从源码学习使用 node-delegates

    node-delegates 是 TJ 大神所写的一个简单的小工具,源码只有 157 行,作用在于将外部对象接受到的操作委托到内部属性进行处理,也可以理解为讲对象的内部属性暴露到外部,简化我们所需要书 ...

  5. hive基础指令

  6. Python之网络模型与图形绘制工具networkx

    笔记 # https://www.jianshu.com/p/e543dc63454f import networkx as nx import matplotlib.pyplot as plt ## ...

  7. iOS启动图launchImage设置后在启动时无法显示

    iOS设置启动图: 会发现运行APP不显示设置好的启动图 解决方法: 卸载之前运行的APP,检查以下配置,将LaunchScreen删除即可. 原因: launchImage 是在没有LaunchSc ...

  8. 50道Kafka面试题和解析(转载)

    转载:https://zhuanlan.zhihu.com/p/78912551 前言 Apache Kafka的受欢迎程度很高,Kafka拥有充足的就业机会和职业前景.此外,在这个时代拥有kafka ...

  9. 【机器学习】Matlab中实现QQ-plot的一个好工具gqqplot

    Matlab中实现QQ-plot的一个好工具gqqplot 26JUN June 26, 2013 这几天看了一下QQ-plot以及在Matlab中的实现,可是Matlab自带的qqplot函数不能满 ...

  10. Notepad++ 用法技巧

    1 搜索技巧 [搜索中文]用正则表达式搜索:[一-龥] 2 用于SWIG语法的模板配置 notepad++是Windows平台上非常优秀的文本编辑器,速度快,功能强,还能自定义语言模板呢.很好用! 这 ...