时间:2021-05-08
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 text-align, text-justify样式了。
text-align直接设为justify就行了,text-justify的情况就复杂了,可能有人对它还不熟悉。IE的取值如下:
但它最早是作为IE的私有实现,像text-overflow, overflow-x等,在FF很晚才实现,换言之有严格的兼容性问题。并且FF,chrome需要手动在汉字间插入空白或软换行标签才生效,在chrome遇到的阻力就更大了。p>
方案:
.test1 { 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){ .test1:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } }运行代码:
<!DOCTYPE HTML> <html> <head> <title>文本两端对齐 </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .box1{ background:red; width:30%; } .test1 { 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){ .test1:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } } </style> </head> <body> <div class="box1"> <div class="test1">姓 名</div> <div class="test1">姓 名 姓 名</div> <div class="test1">姓 名 名</div> <div class="test1">所 在 地</div> <div class="test1">工 作 单 位</div> </div> </body> </html>总结
以上所述是小编给大家介绍的css文本两端对齐的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS各种对齐代码,左对齐、右对齐、中间对齐、底部对齐、两端对齐等,代码简单。.left{text-align:left;
CSS各种对齐代码,左对齐、右对齐、中间对齐、两端对齐,代码简单,在此与大家分享:.left{text-align:lef
两端对齐:设置文本内容两端,调整文字的水平间距,使其均匀分布在左右页边距之间。两端对齐使两侧文字具有整齐的边缘。 Word中设置两端对齐 对齐方式的应用
文本两端对齐:复制代码代码如下:text-align:justify;text-justify:inter-ideograph;清除浮动:复制代码代码如下:.c
网页里各种元素水平方向的对齐方式主要有:左对齐、右对齐、居中对齐和两端对齐等4种方式,常用的为左对齐、居中对齐,右对齐和两端对齐基本很少使用,尤其是两端对齐,