时间:2021-05-08
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 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需要手动在汉字间插入空白或软换行标签才生效。
应用实例:
代码如下:
复制代码代码如下:
<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
注意,在没两个字符之间是有一个空格的
样式代码:
复制代码代码如下:
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{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;
text-align-last:justify;
-moz-text-align-last:justify;
-webkit-text-align-last:justify;
} @media screen and (-webkit-min-device-pixel-ratio:0){ 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;}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
两端对齐:设置文本内容两端,调整文字的水平间距,使其均匀分布在左右页边距之间。两端对齐使两侧文字具有整齐的边缘。 Word中设置两端对齐 对齐方式的应用
CSS各种对齐代码,左对齐、右对齐、中间对齐、底部对齐、两端对齐等,代码简单。.left{text-align:left;
CSS各种对齐代码,左对齐、右对齐、中间对齐、两端对齐,代码简单,在此与大家分享:.left{text-align:lef
网页里各种元素水平方向的对齐方式主要有:左对齐、右对齐、居中对齐和两端对齐等4种方式,常用的为左对齐、居中对齐,右对齐和两端对齐基本很少使用,尤其是两端对齐,
本文实例讲述了CSS强制换行对齐的实现方法。分享给大家供大家参考。具体分析如下:用CSS控制中英文字符强制换行并两端对齐,有效避免DIV的内容超出范围而改变网页