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

wemallshop 发布于2019-08-29 13:09 / 1380人阅读

摘要：做一个列表类似这样的平时经常会用到要是用浮动做还是比较简单的直接左右浮动，清除浮动就可以搞定了，因为最近用用的比较顺手，所以就尝试一下。

做一个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;
  }

可以使文字两端对齐，原理是一样的，代码来自于兼容ie6/ie7的inline-block元素的两端对齐布局

记录在此供大家参考。

云服务器 GPU云服务器文本两端对齐 html两端对齐字节对齐算法实现实现列表页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112401.html

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

摘要：做一个列表类似这样的平时经常会用到要是用浮动做还是比较简单的直接左右浮动，清除浮动就可以搞定了，因为最近用用的比较顺手，所以就尝试一下。做一个ul li 列表类似这样的平时经常会用到showImg(https://segmentfault.com/img/bVSCAH?w=1038&h=155); 要是用浮动做还是比较简单的直接左右浮动，清除浮动就可以搞定了，因为最近用display...

不知名网友 2019-08-02 15:57 评论0 收藏0
《CSS世界》笔记三：内联元素与对齐

摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...

HtmlCssJs 2019-08-29 16:19 评论0 收藏0
手机端单行文字两端对齐：用css伪类实现

摘要：今天在做项目的时候碰到这个问题右侧红线内的小标题单行两端对齐。两端对齐的属性我们知道是，但是这个属性有它的局限性只能为或多行文字才能实现两端对齐。也就是说，在现在的情况下，小标题的单行文字仅仅使用是实现不了两端对齐的。今天在做项目的时候碰到这个问题：右侧红线内的小标题单行两端对齐。 showImg(https://segmentfault.com/img/bVQv1a?w=319&h...

JasonZhang 2019-08-29 12:53 评论0 收藏0
如何解决text-align: justify;浏览器、安卓手机不兼容问题

摘要：下载安装的浏览器等也没有问题。但是用安卓手机再带的浏览器，问题就出现了。经过查询找到一个问题。于是给每个文字之间添加了一个空格，成功解决了各浏览器不兼容手机端不兼容的问题。今天需要切一个响应式网页，有一行文字，需要实现两端对齐。代码如下： .h_text{ text-align: justify; width: 200px; } 这一行要两端对齐根据经验找到t...

Bamboy 2019-08-30 13:54 评论0 收藏0