来自：http://demo.doyoe.com/css3/justify/justify-form.htm  侵删

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>表单标签两端对齐效果</title>

<meta name="description" content="表单项中的标签名两端对齐" />

<meta name="keywords" content="css3, html5, justify, text-align-last" />

<meta name="author" content="doyoe(飘零雾雨), dooyoe@gmail.com, Doyoe's Community" />

<meta name="robots" content="all" />

<!--[if lte IE 8]>

<script src="http://developer.doyoe.com/dui/lib/js/html5.js"></script>

<![endif]-->

<link href="http://developer.doyoe.com/dui/lib/css/reset-grids-comm-min.css" rel="stylesheet" />

<link href="../../skin/layout.css" rel="stylesheet" />

<link href="../../skin/demo.css" rel="stylesheet" />

<style>

.g-btn-submit{overflow:visible;height:31px;padding:3px 20px;border:1px solid #0382AD;border-radius:3px;background-color:#45B5DA;background:-webkit-linear-gradient(#45B5DA,#0382AD);background:linear-gradient(#45B5DA,#0382AD);color:#fff;font-size:14px;}

.g-btn-submit:hover{background-color:#4bc4ec;background:-webkit-linear-gradient(#4bc4ec,#0494c5);background:linear-gradient(#4bc4ec,#0494c5);}

.g-btn-submit:active{background-color:#45B5DA;background:-webkit-linear-gradient(#0382AD,#45B5DA);background:linear-gradient(#0382AD,#45B5DA);}

.g-text-entry{height:17px;padding:5px 5px;border:1px solid #aaa;border-radius:3px;box-shadow:1px 1px 2px rgba(0,0,0,.1) inset;outline:none;background-color:#fff;}

.g-text-entry:focus{box-shadow:0 0 3px rgba(0,0,0,.2);}

.g-text-entry:disabled{border-color:#aaa;background-color:#efefef;}

.g-text-entry.disabled{border-color:#aaa;background-color:#efefef;}

.g-formlist li{zoom:1;padding:5px 0;vertical-align:top;}

.g-formlist li:after{display:block;clear:both;height:0;visibility:hidden;content:'';}

.g-formlist .mark{display:block;float:left;overflow:hidden;width:78px;height:29px;padding-right:10px;text-align:justify;text-align-last:justify;line-height:2;}

.g-formlist .mark:after{display:inline-block;overflow:hidden;width:100%;height:0;content:"";}

.g-formlist .write{display:table-cell;zoom:1;}

.g-formlist .write .tip{display:none;color:#666;font-size:12px;}

.g-formlist .write .g-text-entry:focus{border-color:#7ebaed;background-color:#edfefe;}

.g-formlist .write .g-text-entry:focus ~ .tip{display:inline;}

.g-formlist .write .g-text-entry:focus ~ .tip:after{content:attr(data-initial);}

#form{width:400px;margin:20px auto;text-align:left;}

#form fieldset{padding:20px;border:1px solid #aaa;border-radius:5px;}

#form .act{padding:10px 0 0 88px;}

</style>

</head>

<body>

<nav id="nav">

    <a href="http://blog.doyoe.com/" title="CSS探索之旅 - 飘零雾雨的庄园">CSS探索之旅</a> »

    <a href="http://demo.doyoe.com/" title="Web前端实验室">Web前端实验室</a> »

    表单标签两端对齐 demo

</nav>

<form action="#" method="post" id="form" autocomplete="off">

    <fieldset>

        <legend>表单</legend>

        <ul class="g-formlist">

            <li>

                <label class="mark" for="form-name">姓 名</label>

                <div class="write">

                    <input type="text" id="form-name" class="g-text-entry" placeholder="请输入4-10字符" />

                    <span class="tip" data-initial="请输入4-10字符"></span>

                </div>

            </li>

            <li>

                <label class="mark" for="form-psw">密 码</label>

                <div class="write">

                    <input type="text" id="form-psw" class="g-text-entry" placeholder="请输入6-30字符" />

                    <span class="tip" data-initial="请输入6-30字符"></span>

                </div>

            </li>

            <li>

                <label class="mark" for="form-repsw">确 认 密 码</label>

                <div class="write">

                    <input type="text" id="form-repsw" class="g-text-entry" placeholder="请再输入一遍密码" />

                    <span class="tip" data-initial="请输入6-30字符"></span>

                </div>

            </li>

            <li>

                <label class="mark" for="form-imgcode">验 证 码</label>

                <div class="write">

                    <input type="text" id="form-imgcode" class="g-text-entry disabled" disabled="disabled" placeholder="输入验证码" />

                    <span class="tip" data-initial="请输入验证码"></span>

                </div>

            </li>

        </ul>

        <div class="act"><input type="submit" class="g-btn-submit" value="提交" /></div>

    </fieldset>

</form>

<p class="copyright">&copy; Copyright <a href="http://www.doyoe.com/" title="飘雨社区">Doyoe.com</a></p>

<a id="sources" href="http://blog.doyoe.com/" title="前往 CSS探索之旅">CSS探索之旅</a>

<!--Google Analytics-->

<script>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-3500471-3']);

_gaq.push(['_trackPageview']);

(function() {

    var ga = document.createElement('script'); ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>

css 表单标签两端对齐的更多相关文章

  1. 实现表单label两端对齐

    主要使用css3属性 text-align: justify; text-align-last: justify; 上代码: <ul> <li> <label class ...

  2. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

  3. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. day 31 表单标签，CSS

    一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签 作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...

  5. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  6. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  7. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  8. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  9. SpringMVC 表单标签 & 处理静态资源

    使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...

随机推荐

  1. 嘿！我用python帮我干这些事

    python 无疑是当下火上天的语言,但是我们又不拿来工作,那么能拿来干啥呢?我是这么干的. 1. 平时工作开发用不上,就当个计算器吧! python # 加减乘除 >>> (3 + ...

  2. JavaScript 作用域、命名空间及闭包

    变量作用域: 1.一个变量的作用域是程序源代码中定义这个变量的区域 2.在函数内声明的变量是局部变量,它只在该函数及其嵌套作用域里可见(js 函数可嵌套定义):不在任何函数内声明或在函数内不使用 va ...

  3. 【PHP篇】字符串基础

    1.声明时既可以用双引号也可以用单引号 str1 =”字符串值”;    //可解析引号里的变量等内容 str2=’字符串值’;     //不可解析内容 2.字符串没有长度限制,但要注意内存的消耗 ...

  4. 教你使用docker部署淘宝rap2服务

    什么是rap2 先来说说起因,在上一个星期的分享会上,谈到前后端联调上,有同事提到了rap2,特意去了解了一下,觉得使用这个东西来进行前后端的接口联调来真是太方便了,对比我们之前公司内部开发的API ...

  5. kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

  6. Redis（3）---Redis事务

    Redis事务 Redis 通过 MULTI .EXEC. DISCARD  和 WATCH 四个命令来实现事务功能. MULTI :标记一个事务块的开始. EXEC: 执行所有事务块内的命令. DI ...

  7. 全网最全的Windows下Anaconda2 / Anaconda3里正确下载安装OpenCV（离线方式和在线方式）（图文详解）

    不多说,直接上干货! 说明: Anaconda2-5.0.0-Windows-x86_64.exe安装下来,默认的Python2.7 Anaconda3-4.2.0-Windows-x86_64.ex ...

  8. Java工程师修炼之路（从小白到BAT的两年学习历程）

    ​ 作者:陆小凤 文章首发于:微信公众号[程序员江湖] 前言 在下本是跨专业渣考研的985渣硕一枚,经历研究生两年的学习积累,有幸于2019秋季招聘中拿到几个公司的研发岗offer,包括百度,阿里,腾 ...

  9. 非业务 Oracle SQL 语句备份

    1.创建一个将 Oracle 生成的 GUID 格式化为标准的 GUID 的函数 2.在 PLSQL 中测试并输出语句异常的语句块 3.在查询语句中日期的一种特殊表示方法 4.利用 ROWNUM 做分 ...

  10. ES6躬行记（11）——对象

    在第5篇中,讲解了多个对象字面量的改进,本节将重点介绍两个新增的静态方法,以及对象属性的重复处理和枚举顺序. 一.Object.is() 此方法用于判断两个值是否相同,内部实现了SameValue算法 ...