美文网首页
text-align:justify实践

text-align:justify实践

作者: 前端工程狮_jam | 来源:发表于2018-01-29 21:14 被阅读0次

    多列均匀布局主要是利用了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实践

          本文链接:https://www.haomeiwen.com/subject/uzcraxtx.html