text-align:justify实践

多列均匀布局主要是利用了text-align:justify，但text-align:justify不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行），也就是单行是不生效的，需要借助伪类after来实现多行，并将:after设为inline-block。

<style type="text/css">
    .justify{
        position: relative;
        width: 80%;
        height: 24px;
        text-align: justify;
        margin-bottom: 20px;
        border: 1px solid #000;
    }
    i{
        width: 24px;
        line-height: 24px;
        display: inline-block;
        text-align: center;
        background: #333;
        color: white;
        border-radius: 50%;
        overflow: hidden;
        font-style: normal;
    }
    .justify:after{
        content: '';
        width: 100%;
        display: inline-block;
        position: relative;
    }
</style>
<body>
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
        <i>7</i>
        <i>8</i>
    </div>
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
    </div>
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
    </div>
</body>

利用这种原理同样可以处理表单元素文本长度不一致的情况，justify可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，例如帐号/用户密码描述长度不一样。

<style type="text/css">
span {
    width: 100px;
    text-align: justify;
    float: left;
}
span:after {
    content: '';
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 0;
}
input {
    width: 100px;
}
<style>
<body>
    <div class="demo">
        <span>昵称</span>：
        <input type="text" style='width: 100px'>
        <br>
        <br>
        <span>电子邮箱</span>：
        <input type="email" style='width: 100px;'>
    </div>
</body>

text-align:justify实践

推荐阅读更多精彩内容