CSS 文字两端对齐

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .box1{
            background:red;
            width:%;
        }
        .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:){/* chrome*/
            .scatter:after{
                content:".";
                display: inline-block;
                width:%;
                overflow:hidden;
                height:;
            }
        }
    </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>

http://blog.sina.com.cn/s/blog_7db0c22a01011emo.html

http://www.cnblogs.com/Travel/p/4552701.html