实现表单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=" ...
随机推荐
- 链接Linux工具(SecureCRT)
SecureCRT下载 点我下载 http://download.csdn.net/download/weixin_39549656/10207279 安装 先运行注册机 链接 输入密码 出现以下界面 ...
- HmacSha1加密-java
package com.test; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import org.apache ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_4-04 高级篇幅之服务间调用之负载均衡策略调整实战
笔记 4.高级篇幅之服务间调用之负载均衡策略调整实战 简介:实战调整默认负载均衡策略实战 自定义负载均衡策略:http://cloud.spring.io/spring-cloud-stati ...
- 一百零一:CMS系统之自定义restful风格json返回格式和内容
鉴于flask-restful用起来太麻烦,这里自定义json统一返回格式和内容 from flask import jsonify class HttpCode: """ ...
- Linux日常用的命令
查看一个文件夹是的挂载路径,比如查看opt文件夹挂载在哪:df /opt root@iZ2zedo02x7n4nuc3lb4ueZ:~# df /opt Filesystem 1K-blocks Us ...
- 封装Button ,封装UITableView,封装UICollectionView
---恢复内容开始--- 封装Button ,封装UITableView,封装UICollectionView: 1.实现Button的创建和点击事件不用分开操作处理; 2.实现UITableView ...
- C# 加解密工具类
using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Clov ...
- androidstudio的安装与抓log
公司新开发的软件是基于unity的,我们被告知unity是不允许charles抓包的,故此只能只用 Android studio 一. Android studio的安装与配置 在此我就不赘 ...
- k8s 网络模型解析之实践
一. 实践说明 首先我们先创建一组资源,包括一个deployment和一个service apiVersion: apps/v1 kind: Deployment metadata: name: ng ...
- 如何使用QTP12 UFT做功能性测试(转载)
首先,按照本博客的安装教程走的,右键管理员运行 接下来点击继续,这个界面只需要勾选到web即可 点击ok,开始运行 进入到主界面之后,file新建一个测试. 可以修改路径等等 点击create之后,出 ...