CSS 文字两边对齐

<!DOCTYPE HTML>
<html>
<head>
<title></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>


你可能感兴趣的:(CSS 文字两边对齐)