css 表单标签两端对齐
来自: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">© 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 表单标签两端对齐的更多相关文章
- 实现表单label两端对齐
主要使用css3属性 text-align: justify; text-align-last: justify; 上代码: <ul> <li> <label class ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- day 31 表单标签,CSS
一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签 作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- 5.22 HTML 列表标签和表单标签
1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li: listitem 列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...
- Bootstrap CSS 表单
表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...
- SpringMVC 表单标签 & 处理静态资源
使用 Spring 的表单标签 通过 SpringMVC 的表单标签可以实现将模型数据中的属性和 HTML 表单元素相绑定,以实现表单数据更便捷编辑和表单值的回显. form 标签 一般情况下,通过 ...
随机推荐
- 每天学点SpringCloud(十二):Zipkin全链路监控
Zipkin是SpringCloud官方推荐的一款分布式链路监控的组件,使用它我们可以得知每一个请求所经过的节点以及耗时等信息,并且它对代码无任何侵入,我们先来看一下Zipkin给我们提供的UI界面都 ...
- Hexo博客主题优化
Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...
- LabVIEW(七):多态VI
1.多态VI概念:可以处理多种不同数据类型的VI被称为“多态VI”.多态VI根据输入或输出的 数据类型,再选择调用一个针对这种数据类型实现功能的VI,这些针对某种数据类型实现功能的VI称作“实例VI” ...
- Python档案袋( Sys 与 Import 模块)
Sys模块: 获取Python有关的环境变量: import sys #得到Python的一些相关路径,环境变量 #其中site-packages目录存放的是一些第三方库 #其中lib目录存放的是一些 ...
- spark面试总结4
Spark on Yarn面试篇04 1.MRV1有哪些不足? 1)可扩展性(对于变化的应付能力) a) JobTracker内存中保存用户作业的信息 b) JobTracker使用的是粗粒度的锁 2 ...
- socket 实现单一串口共享读写操作
前提:物理串口连接到PC上,通过串口号被PC唯一识别. 此时,物理串口通过该串口号仅能被单一线程或进程实例并占用,其他线程或进程不能再通过该串口号与物理串口通信.这个暂称为串口独占性. 解决思路:核心 ...
- ASP.NET Core微服务+Tabler前端框架搭建个人博客1--开始前想说的话
写在前面 本人为在读研究生,特别喜欢.NET,觉得.NET的编程方式.语法都特别友好,学习.NET Core已经差不多有一年半了,从一开始不知道如何入门到现在终于可以编写一些小的应用程序,想一想还是非 ...
- Android切换横竖屏不销毁前台Activity,也不影响后台Activity
在切换屏幕方向的时候,Activity默认会走销毁->重建的生命周期,而有时候我们不希望如此,就需要做些额外的设置了: 1.在AndroidMainifest.xml中对应的Activity标签 ...
- 第二次作业:分布式版本控制系统Git的安装与使用
本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 第一个git仓库地址:https://github.com/ ...
- 聊聊JVM(二)说说GC的一些常见概念
转自CSDN 上一篇总结GC的基础算法,各种GC收集器的基本原理,还是比较粗粒度的概念.这篇会整理一些GC的常见概念,理解了这些概念,相信对GC有更加深入的理解 1. 什么时候会触发Minor GC? ...