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>


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