css 文本两端对齐如何实现



css 文本两端对齐如何实现？在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 text-align， text-justify样式了。

text-align直接设为justify就行了，text-justify的情况相对比较复杂
IE的取值如下：
auto :允许浏览器用户代理确定使用的两端对齐法则
inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
distribute :处理空格很像newspaper，适用于东亚文档。尤其是泰国
distribute-all-lines :两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档
inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格
但它最早是作为IE的私有实现，像text-overflow， overflow-x等，在FF很晚才实现，换言之有严格的兼容性问题。
并且FF，chrome需要手动在汉字间插入空白或软换行标签才生效。
应用实例：
css 文本两端对齐 - 独行冰海 - 独行冰海

基本的结构代码如下：

<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;}