有些时候我们在写一些表单页面的时候,会遇到文字两边对齐的情况,如下:

    文字两边对齐

    今天来看看如何实现。

    flex实现

    display:flex的时候,有一个justify-content: space-between;的设置,这个设置表示内部元素均匀平分容器同时靠两边对齐。这种方式可以实现两端对齐,但是需要给每个字添加一个span,关键代码如下:

    1. //html
    2. <span class='name'>
    3.     <span></span>
    4.     <span></span>
    5.     <span></span>
    6. </span>
    7. //css
    8. .name {
    9.     display: inline-block;
    10.     width: 80px;
    11.     display:flex;
    12.     display:-webkit-flex;
    13.     justify-content: space-between;
    14.     -webkit-justify-content: space-between;
    15. }

    lex实现文字两边对齐

    column实现

    column表示分列展示,可以设置column-count,column-gap,设置列的行数和间隙。用这个实现两端对齐可能比较麻烦,例如如果有两个字,那么column-count为2,column-gap为100%-2em;如果为3个字,column-count为3,column-gap为50%-1.5em,计算方法大致如下:

    column实现文字两边对齐

    text-align:justify实现

    text-align:justify表示文字均匀对齐,这个用来实现两端对齐的话有一个问题,就是它必须要有一行以上才行,因此我们一般会利用:after在弄一行出来,同时设置line-height和height,将第二行隐藏。关键代码如下:

    1. .name {
    2.     display: inline-block;
    3.     width: 80px;
    4.     text-align:justify;
    5.     line-height:20px;
    6.     height:20px;
    7.     overflow:hidden;
    8. }
    9. .name:after{
    10.     content:'';
    11.     width:100%;
    12.     display:inline-block;
    13. }

    text-align:justify实现文字两边对齐

    text-align-last:justify实现

    这个和text-align:justify相比更灵活,它表示最后一行的文字对齐方式,因为我们这里只有一行,因此刚好,不过这个只是chrome和ff支持,safaric不支持。

    text-align-last:justify实现文字两边对齐

    回到顶部
    我要评论

    所有评论

      相关文章