css 文本两端对齐
来源:互联网 发布:云海玉弓缘 知乎 编辑:程序博客网 时间:2024/04/28 12:32
应用实例:
代码如下:
<form> <div> <span>用 户 名</span> <input id='username' type="text" name="" /> <strong></strong> </div> <div> <span>密 码</span> <input type="password" name="" /> <strong></strong> </div> <div> <span>确 认 密 码</span> <input type="password" name="" /> <strong></strong> </div> <div> <span>兴 趣 爱 好</span> <input type="text" name="" /> <strong></strong> </div> <div class='reg'> <input type="button" value='点此注册' name="" /> </div></form
注意,在没两个字符之间是有一个空格的
样式代码:
/*CSS reset 顶部为css的重置代码*/html{color:#000;background:#FFF;font-family:Microsoft YaHei,sans-serif,Arial,'宋体';}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}a{text-decoration:none; color:#; outline:none;}/*此处待添加默认链接颜色*/a:hover{text-decoration:none;color:#cb1114};var,em,strong{font-style:normal;}address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}.clear {clear:both;height:0px;overflow:hidden;} body{-webkit-user-select:none;-webkit-text-size-adjust:none;-webkit-transform-style:preserve-3d;}*{-webkit-tap-highlight-color:rgba(0,0,0,0);}/*form 从此处起为表单的样式处理*/form{width:430px;margin:20px auto 0;}div{
width:430px;
height:40px;
line-height:40px;
clear:both;
word-spacing:-1em;/*调整文本,以防止使用两端对齐之后字间距过大*/
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}@media screen and (-webkit-min-device-pixel-ratio:0){/* 兼容chrome*/ div span:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; }}span{float:left;width:65px;height:40px;line-height:40px;margin-right:10px;}strong{float:left;width:140px;height:40px;line-height:40px;margin-left:10px;background:#ccf;}input[type=text]{float:left;width:200px;height:20px;margin:10px 0;}input[type=password]{float:left;width:200px;height:20px;margin:10px 0;}input[type=button]{color:#00f;width:100px;height:30px;}.reg{text-align:center;margin:20px auto 0;}
- CSS 文本两端对齐
- css:文本两端对齐
- css:文本两端对齐
- css:文本两端对齐
- css 文本两端对齐
- css 文本两端对齐
- css 文本两端对齐
- css 文本两端对齐
- css 文本两端对齐
- css单行文本两端对齐
- css 文本两端对齐
- css+js解决文本两端对齐以及分散对齐
- 文本两端对齐方式
- 两端对齐文本效果
- 两端对齐文本效果
- 文本两端对齐
- Android TextView两端对齐、文本两端对齐
- CSS实现文本向两端对齐的方法
- C# MVC 自学笔记—7 将新字段添加到的电影模型和表
- VisualStudio2008注册表删除最近的项目,最近的文件
- JQuery 1.10.2源码分析学习5
- 【Linux】shell命令学习之find
- web随堂
- css 文本两端对齐
- 关于launcher改变tabs_container和tabhost位置引发的血案
- 最小化程序到右下角
- 將一個listview中的數據用ViewPager實現橫屏滑動分頁顯示
- Jedis 简单应用
- IOS 常用的小代码
- 雇员表,外键问题
- 菜鸟之旅——Java入门篇(三)简单语句
- string 相关