CSS兩端對齊語法及代碼實(shí)例教學(xué)

<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>確 認(rèn) 密 碼</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='點(diǎn)此注冊' 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;}/*此處待添加默認(rèn)鏈接顏色*/ 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;/*調(diào)整文本，以防止使用兩端對齊之后字間距過大*/ 

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

div.justify 

{text-align: justify; width:200px; font-size:15px; color:red; 

border:1px solid blue; height:18px;}

div.justify > span 

{display: inline-block /* Opera */; 

padding-left: 100%; }