dispaly:inline-block 对于块级元素,在IE8-下是不兼容的,所以一般不要用在这些元素上,可以用在inline元素上:span

text-align:justify实现子元素完全对齐父元素的两端,这样就可以根本无需计算每个列表元素间的margin间距,更不用去修改父容器的宽度。

demo:

.justify{ text-align: justify;
border: 1px solid #000;}
.justify span{ display:inline-block;height:100px; background-color: red; width:300px;}
<div class="justify">
<span>这是列表元素</span>
<span>这是列表元素</span>
<span>这是列表元素</span>
<span>这是列表元素</span>
</div>
可以实现两端完全对齐,其实在子元素在一行不能完全放下,需要换行,如果最后一行的子元素比较少,不能完全占满父元素,最后一行就不能实现与父元素的两端完全对齐。解决办法:
在最后添加一个元素
.justify_fix{ display:inline-block; width:100%; hieght:0; overflow:hidden;}
<div class="justify">
<span>这是列表元素</span>
<span>这是列表元素</span>
<span>这是列表元素</span>
<span>这是列表元素</span>
<span class="justify_fix">这是列表元素</span>
</div>
为了在ie8-也可以实现同样的效果需要写样写
列表元素及其内部标签的结束标签需要连在一起   如果列表标签内嵌多层,则所有层级的结束标签都要连续。
<div class="justify">
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span class="justify-fix"></span></div>
tip:
子元素不能连在一起,也就是span之间不能<span></span><span></span>这样写,上一个的结束标签与下一个的开始标签连在一起,需要换行书写; 很多时候,我们希望列表的最后一行是左对齐排列的,而不是两端对齐,这时候怎么办呢?
原理与上面的两端对齐一致。就是复制几个列表元素的外层标签,等宽,但高度为0,里面就是个&nbsp;(不可缺),复制的个数一般就是每行元素的列表个数啦,这样肯定可以保证最后一行元素一定是左对齐排列的啦
.left_fix{height:0; padding:0; overflow:hidden;}

<div class="justify">
<span>这是列表元素</span>
<span>这是列表元素</span>
<span>这是列表元素</span>
<span>这是列表元素</span>
<span class="justify_fix">这是列表元素</span>
</div>
为了在ie8-也可以实现同样的效果需要写样写

列表元素及其内部标签的结束标签需要连在一起   如果列表标签内嵌多层,则所有层级的结束标签都要连续。

<div class="justify">
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span>
<a href="#"><img src="data:images/1s.jpg"/></a>
<span>描述</span></span>
<span class="justify-left"></span>
<span class="justify-left"></span>
<span class="justify-left"></span></div>
												

实现列表两端完全对其text-aligh:justify 和display:inline-block的更多相关文章

  1. XPATH 要想获取的东西里不分段,不变成列表就用STRING(),不用TEXT()

    简单说一说: requests配合xpath来抓网站数据的时候,不像selenium+xpath. selenium有  find_element  find_elements,区别是带S ,查找第一 ...

  2. HTML 网页特效CSS大全

    css属性代码大全一CSS文字属性:color : #999999; /* 文字颜色*/font-family : 宋体,sans-serif; /* 文字字体*/font-size : 9pt; / ...

  3. css样式大全

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...

  4. css 样式大全

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...

  5. html + CSS

    Html 1 html基本标签 1.1 html文件结构 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN&qu ...

  6. 常见常用的CSS

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...

  7. 前端学习-基础部分-css(一)

    开始今日份整理 1.CSS的导入方式 CSS的导入方式主要是有内联模式,行内模式,外部样式表 1.1 内联模式 内联模式:直接在<head>中直接写css,例如 p{ color:rgb( ...

  8. CSS样式整理大全

    转载自:http://www.cnblogs.com/laihuayan/archive/2012/07/27/2611111.html 字体属性:(font) 大小 {font-size: x-la ...

  9. CSS属性大全

    字体属性:(font)大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style:oblique;(偏 ...

随机推荐

  1. 2018.11.7 PION 模拟赛

    期望:100 + 80 + 75 = 255 实际:0 + 80 + 60 = 140 唉~一天比一天犯的错误智障,感觉noip要凉啊... 吓得我赶紧吃几颗药补补脑子. 奶一下大佬: lgj AK ...

  2. mysql统计功能和数据库information_schema/performance_schema

    1.去重统计数据表行数: select count(distinct col_name) from table_name; 2.统计行数 select count(*) from table_name ...

  3. [转]使用Fabric自动化你的任务

    fabric是什么? Fabric是一个Python库,可以通过SSH在多个host上批量执行任务.你可以编写任务脚本,然后通过Fabric在本地就可以使用SSH在大量远程服务器上自动运行.这些功能非 ...

  4. php-cpp用来开发php的拓展

    官网: http://www.php-cpp.com/documentation/install, 找时间要学一下.

  5. Objective C运行时(runtime)技术总结,好强大的runtime

    前言:          Objective C的runtime技术功能非常强大,能够在运行时获取并修改类的各种信息,包括获取方法列表.属性列表.变量列表,修改方法.属性,增加方法,属性等等,本文对相 ...

  6. hive:Access denied for user &#39;root&#39;@&#39;%&#39;

    配置hive全分布模式时候,在mysql里面创建用户:create user 'hive' identified by 'hive'; 然后给hive帐号分配全部权限: grant all privi ...

  7. HDU 5371 Hotaru&#39;s problem(Manacher算法+贪心)

    manacher算法详见 http://blog.csdn.net/u014664226/article/details/47428293 题意:给一个序列,让求其最大子序列,这个子序列由三段组成, ...

  8. IBM中国研究院、SAP、网易游戏、IBM2015应届生招聘笔试面试问题分享

    IBM中国研究院实习生 早在今年4月份.我面试的是IBM中国研究院的实习生岗位.主要是自然语言处理和语义网方向.那时我还在香港上学,两个考官对我进行的是电话面试,大概持续半个多小时,首先是我的自我介绍 ...

  9. eclipse debug configurations arguments指定文件路径参数

    1 eclipse debug configurations arguments指定文件路径参数 使用绝对路径,但是这个文件必须要放在该project的源码路径的外面才行,否则eclipse不认这个文 ...

  10. android 图片内存问题

    在android开发过程中,经常遇到oom的问题,原因有很多种,其中最难处理的是图片造成的oom,于是在网络上对比了几个图片加载的库,最终选择了Facebook的fresco库(github地址:ht ...