继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【学习笔记】文字两端对齐的完美解决方法

小牛牛天天快乐
关注TA
已关注
手记 15
粉丝 6
获赞 568

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="为了以后方便,把常用的小效果制作整理,如有问题或者更好的方法,请告知!谢谢!!!!">
<meta name="author" content="QQ邮箱:30860662@qq.com">
<title></title>
<style>
.box1{width:200px;height:25px;text-align:justify; text-justify:distribute-all-lines;}
.box1 span{width:100%;display: inline-block / Opera /; font-size:0;line-height:0;height:0;}

box2 p{width:200px;height:32px;border:1px solid #ddd;font-size:20px;text-align:justify;text-justify:distribute-all-lines;

}

box2 p:after{display:inline-block;content:'';width:100%;height:0;}

/
兼容IE浏览器:text-justify:distribute-all-lines;
后面要写span,必须设为行内块
兼容:IE5,7,8,9,10,11,IE6未测,safari
注意:要兼容safari浏览器,需要文字间加空格
/
</style>
</head>

<body>
<h3>方法一:</h3>
<div class="box1">用 户 名<span></span></div>
<div class="box1">密 码<span></span></div>
<hr>
<h3>方法二:</h3>
<div id="box2">
<p>用 户 名</p>
<p>密 码</p>
</div>
</body>

打开App,阅读手记
14人推荐
发表评论
随时随地看视频慕课网APP

热门评论

谢谢分享,谢谢

ie都没测。 任性

查看全部评论