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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,630评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,519评论 0 6
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,050评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,100评论 0 1