主要使用css3属性

text-align: justify;

text-align-last: justify;

上代码:

  1. <ul>
  2. <li>
  3. <label class="mark">用户名</label>
  4. <div>
  5. <input type="text" id="form-name" />
  6. </div>
  7. </li>
  8. <li>
  9. <label class="mark">验证码</label>
  10. <div>
  11. <input type="text" id="form-verifiy" />
  12. </div>
  13. </li>
  14. <li>
  15. <label class="mark">密码</label>
  16. <div>
  17. <input type="text" id="form-password" />
  18. </div>
  19. </li>
  20. <li>
  21. <label class="mark">确认密码</label>
  22. <div>
  23. <input type="text" id="form-sure_pass" />
  24. </div>
  25. </li>
  26. </ul>
  1. li {
  2.  
  3. clear: both;
  4.  
  5. list-style: none;
  6.  
  7. }
  8.  
  9. .mark {
  10.  
  11. display: block;
  12.  
  13. float: left;
  14.  
  15. overflow: hidden;
  16.  
  17. width: 78px;
  18.  
  19. height: 29px;
  20.  
  21. padding-right: 10px;
  22.  
  23. text-align: justify;
  24.  
  25. text-align-last: justify;
  26.  
  27. }
  28.  
  29. 效果展示:

  1.  

实现表单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. 链接Linux工具(SecureCRT)

    SecureCRT下载 点我下载 http://download.csdn.net/download/weixin_39549656/10207279 安装 先运行注册机 链接 输入密码 出现以下界面 ...

  2. HmacSha1加密-java

    package com.test; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import org.apache ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_4-04 高级篇幅之服务间调用之负载均衡策略调整实战

    笔记 4.高级篇幅之服务间调用之负载均衡策略调整实战     简介:实战调整默认负载均衡策略实战 自定义负载均衡策略:http://cloud.spring.io/spring-cloud-stati ...

  4. 一百零一:CMS系统之自定义restful风格json返回格式和内容

    鉴于flask-restful用起来太麻烦,这里自定义json统一返回格式和内容 from flask import jsonify class HttpCode: """ ...

  5. Linux日常用的命令

    查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...

  6. 封装Button ,封装UITableView,封装UICollectionView

    ---恢复内容开始--- 封装Button ,封装UITableView,封装UICollectionView: 1.实现Button的创建和点击事件不用分开操作处理; 2.实现UITableView ...

  7. C# 加解密工具类

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Clov ...

  8. androidstudio的安装与抓log

    公司新开发的软件是基于unity的,我们被告知unity是不允许charles抓包的,故此只能只用 Android   studio 一. Android    studio的安装与配置 在此我就不赘 ...

  9. k8s 网络模型解析之实践

    一. 实践说明 首先我们先创建一组资源,包括一个deployment和一个service apiVersion: apps/v1 kind: Deployment metadata: name: ng ...

  10. 如何使用QTP12 UFT做功能性测试(转载)

    首先,按照本博客的安装教程走的,右键管理员运行 接下来点击继续,这个界面只需要勾选到web即可 点击ok,开始运行 进入到主界面之后,file新建一个测试. 可以修改路径等等 点击create之后,出 ...