display：inline-block两端对齐实现列表-白红宇

display：inline-block两端对齐实现列表

阅读量：6606 次

发布时间：2019-06-24

本文共 1342 字，大约阅读时间需要 4 分钟。

做一个ul li 列表类似这样的平时经常会用到

要是用浮动做还是比较简单的直接左右浮动，清除浮动就可以搞定了，因为最近用display:inline-block用的比较顺手，所以就尝试一下。

通过text-align:left，text-align:right，可以控制元素靠左还是靠右，这种方法只能做到同一个元素之下的所有元素同时靠左或者靠右，通过百度一番找到text-align: justify，代码如下：


                
                   时间都会发加快速度回房间卡是否会              sdfsaffasd
                          
            
                   时间都会发加快速度回房间卡是否会
              sdfsaffasd
                          
            
                   时间都会发加快速度回房间卡是否会
              sdfsaffasd
                          
            
                   时间都会发加快速度回房间卡是否会
              sdfsaffasd

.justify-last{    display:inline-block;width:100%;height:0;  }

最为关键的就是要在li的最后一行加入一个空的宽度100%的inline-block元素，这个方法有一个缺点就是加入空元素会占位每行之间会留有空隙，我现在还没有找到解决办法，有方法的同学可以说一下。

另外还找到一种用法：


              
     作品名称：  宝贝儿
          
     作品类型：  油画
          
     艺术家：  张玉瀛
          
     风格：  超现实
          
     材质：  布面油画
          
     题材：  人物
          
     创作时间：  2011
          
     所在位置：  华东
          
     尺寸：  78x78cm

.arter li{    width: 200px;    font-size:14px;line-height:24px;color:#4a4a4a;  }  .arter span {    height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;  }  .arter i {    display:inline-block;width:100%;height:0;  }

可以使文字两端对齐，原理是一样的，代码来自于

记录在此供大家参考。

转载地址：http://pfbso.baihongyu.com/

你可能感兴趣的文章

[Android6.0][RK3399] 双屏异显代码实现流程分析（二）【转】