CSS 文字两边对齐

<!DOCTYPE HTML>

<html>

<head>

<title>文本两端对齐 by 司徒正美</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

.box1{

  background:red;

  width:20%;

}

.scatter {

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*/

.scatter:after{

  content:".";

  display: inline-block;

  width:100%;

  overflow:hidden;

  height:0;

}

}

</style>

</head>

<body>

  <div class="box1">

    <div class="scatter">姓 名</div>

    <div class="scatter">姓 名 姓 名</div>

    <div class="scatter">姓 名 名</div>

    <div class="scatter">所 在 地</div>

    <div class="scatter">工 作 单 位</div>

  </div>

</body>

</html>


转载于:https://my.oschina.net/u/1420250/blog/214839

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值