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. Linux下多线程编程-信号量

    今天来谈谈线程的同步--信号量. 首先来看看一些概念性的东西: 如进程.线程同步,可理解为进程或线程A和B一块配合,A执行到一定程度时要依靠B的某个结果,于是停下来,示意B运行:B依言执行,再将结果给 ...

  2. 时序数据库TSDB简单了解

    由于项目需要,简单看来下时序数据库: 时序数据库是针对大量数据写入.主要用于记录时序数据的,使用于监控记录的场景:写多读少场景: 什么是时序数据.时序数据是基于时间的一系列的数据.在有时间的坐标中将这 ...

  3. 最大熵推导LR

    http://www.win-vector.com/dfiles/LogisticRegressionMaxEnt.pdf https://www.zhihu.com/question/2409455 ...

  4. PHP中extract()函数的妙用

    看cakephp 2.3.8的源代码,很多地方都用 到 compact('name', 'response'); extract($status, EXTR_OVERWRITE); 这样的代码.com ...

  5. ElasticSearch生产模式开发模式的区分

    ElasticSearch生产模式开发模式的区分 network.host: 0.0.0.0 如果network.host不是localhost就是生产模式, 开发模式中的warning就是生产模式中 ...

  6. SolidWorks如何绘制抽壳零件

    1 绘制一个零件,点击抽壳   2 你可以一个一个面选,也可以直接选中一个零件,对他的所有面都薄壳处理(右击弹出菜单选择确定即可)   3 可以用剖视图检查是否抽壳成功   4 对于复杂的零件,一个一 ...

  7. centos 重新获取IP hdcp 模式

    centos 重新获取IP hdcp 模式 dhclient -r →release dhclient →renew

  8. 小老虎CSDN博客流量分析

    小老虎CSDN博客流量分析 一.分析的博客对象 http://blog.csdn.net/littletigerat 二.分析的时间节点 2014年7月10日星期四 三.PV.UV以及IP值   wa ...

  9. Python 包的制作(__init__.py)

    如何制作一个自己的包:首先,需要创建一个文件夹,将其作为顶层包,在此文件夹内我们可以定义各个不同的子文件夹与 .py 文件作为各个子包与模块注意:在每个包文件夹下都需要有一个 __init__.py ...

  10. Android安装应用后点击&quot;打开&quot;(Open)带来的问题及解决方案

    MainActivity例如以下: package cc.cc; import android.app.Activity; import android.content.Intent; import ...