css 文本兩端對(duì)齊應(yīng)用實(shí)例
發(fā)布時(shí)間：2013-09-27 16:54:52 作者：佚名 
我要評(píng)論
我要評(píng)論在做表單時(shí)我們經(jīng)常遇到讓上下兩個(gè)字段對(duì)齊的情況，比如姓名， 手機(jī)號(hào)碼， 出生地，一般情況下我們都會(huì)使用text-align、text-justify樣式來應(yīng)付，下面有個(gè)不錯(cuò)的示例大家可以參考下，希望對(duì)大家有所幫助
在做表單時(shí)我們經(jīng)常遇到讓上下兩個(gè)字段對(duì)齊的情況，比如姓名， 手機(jī)號(hào)碼， 出生地。這樣我們就要用到 text-align， text-justify樣式了。
text-align直接設(shè)為justify就行了，text-justify的情況相對(duì)比較復(fù)雜
IE的取值如下：
auto :允許瀏覽器用戶代理確定使用的兩端對(duì)齊法則
inter-word :通過增加字之間的空格對(duì)齊文本。該行為是對(duì)齊所有文本行最快的方法。它的兩端對(duì)齊行為對(duì)段落的最后一行無效
newspaper : 通過增加或減少字或字母之間的空格對(duì)齊文本。是用于拉丁文字母表兩端對(duì)齊的最精確格式
distribute :處理空格很像newspaper，適用于東亞文檔。尤其是泰國(guó)
distribute-all-lines :兩端對(duì)齊行的方式與distribute相同，也同樣不包含兩段對(duì)齊段落的最后一行。適用于表意字文檔
inter-ideograph : 為表意字文本提供完全兩端對(duì)齊。他增加或減少表意字和詞間的空格
但它最早是作為IE的私有實(shí)現(xiàn)，像text-overflow， overflow-x等，在FF很晚才實(shí)現(xiàn)，換言之有嚴(yán)格的兼容性問題。
并且FF，chrome需要手動(dòng)在漢字間插入空白或軟換行標(biāo)簽才生效。
應(yīng)用實(shí)例：
代碼如下:
<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)此注冊(cè)' name="" />
</div>
</form
注意,在沒兩個(gè)字符之間是有一個(gè)空格的
樣式代碼：
/*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)整文本，以防止使用兩端對(duì)齊之后字間距過大*/
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;}
text-align直接設(shè)為justify就行了，text-justify的情況相對(duì)比較復(fù)雜
IE的取值如下：
auto :允許瀏覽器用戶代理確定使用的兩端對(duì)齊法則
inter-word :通過增加字之間的空格對(duì)齊文本。該行為是對(duì)齊所有文本行最快的方法。它的兩端對(duì)齊行為對(duì)段落的最后一行無效
newspaper : 通過增加或減少字或字母之間的空格對(duì)齊文本。是用于拉丁文字母表兩端對(duì)齊的最精確格式
distribute :處理空格很像newspaper，適用于東亞文檔。尤其是泰國(guó)
distribute-all-lines :兩端對(duì)齊行的方式與distribute相同，也同樣不包含兩段對(duì)齊段落的最后一行。適用于表意字文檔
inter-ideograph : 為表意字文本提供完全兩端對(duì)齊。他增加或減少表意字和詞間的空格
但它最早是作為IE的私有實(shí)現(xiàn)，像text-overflow， overflow-x等，在FF很晚才實(shí)現(xiàn)，換言之有嚴(yán)格的兼容性問題。
并且FF，chrome需要手動(dòng)在漢字間插入空白或軟換行標(biāo)簽才生效。
應(yīng)用實(shí)例：
代碼如下:
復(fù)制代碼
代碼如下:<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)此注冊(cè)' name="" />
</div>
</form
注意,在沒兩個(gè)字符之間是有一個(gè)空格的
樣式代碼：
復(fù)制代碼
代碼如下:/*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)整文本，以防止使用兩端對(duì)齊之后字間距過大*/
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;}
相關(guān)文章
css兩端對(duì)齊之div+css布局實(shí)現(xiàn)2端對(duì)齊的4種方法總結(jié)
div+css布局實(shí)現(xiàn)2端對(duì)齊是我們網(wǎng)頁排版中經(jīng)常會(huì)使用到的，這篇文章主要介紹了css兩端對(duì)齊之div+css布局實(shí)現(xiàn)2端對(duì)齊的4種方法總結(jié)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給2018-09-29css文本兩端對(duì)齊的實(shí)現(xiàn)代碼
這篇文章主要介紹了css文本兩端對(duì)齊的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-11-07