CSS文字两端对齐

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>


        .justify {
            border: 1px solid blue;
            width: 200px;
            height: 18px;
            font-size: 15px;
            color: red;
            text-align: justify;
        }

        .justify span {
            display: inline-block;
            padding-left: 100%;
        }


    </style>
</head>

<body>


<div class="justify">hello, text justify.</div>
<br/>

<div class="justify"> hello, text justify.<span></span></div>
<br/>

<div class="justify">中 文 两 端 对 齐</div>
<br/>

<div class="justify">中 文 两 端 对 齐<span></span></div>


</body>

</html>

result：

总结：从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

posted on 2016-06-16 19:05 Newbie_小白阅读(585) 评论(0) 收藏举报