在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。遇到这种情况一般会用左右浮动,虽然可以实现效果但是感觉很low~如果你细心发现你会记得关于文字对齐有一个样式是text-align: text-justify当时可能你是因为浏览器不兼容而没用,现在我给大家讲一下兼容浏览器的写法:
p { width:200px; border:1px solid #ddd; font-size:12px; line-height:30px; overflow: hidden;} p span{ display:inline-block; float:left; width: 150px; 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*/ p span:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0;} } <p><span>地址</span>:</p><p><span>邮箱地址</span>:</p><p><span>地址</span>:</p>
有人会纳闷为什么还用媒体查询了,没办法,谷歌就是会有bug只有这样才能解决。就像其他人用空的span一样
时间: 2024-10-03 15:11:34