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. ios 处理内存警告

    iPhone下每个app可用的内存是被限制的,如果一个app使用的内存超过20M,则系统会向该app发送Memory Warning消息.收到此消息后,app必须正确处理,否则可能出错或者出现内存泄露 ...

  3. Ubuntu 16.04安装IntelliJ IDEA时快捷键冲突设置

    解决快捷键冲突可以有如下方法: 1.直接修改IDEA的,但是不建议这么干,因为多平台时,或者去到另外一台电脑时,统一的快捷键能更快的适应新的开发环境. 2.通过修改系统默认的快捷键. 3.就这两种方式 ...

  4. Oracle EBS - 工单状态

    Job status update 1. Job的几种状态 unreleased --未核发 released--已核发 complete --完成 complete no charges--完成不计 ...

  5. js时间戳和时间格式之间的转换

    //时间戳转换成日期时间2014-8-8 下午11:40:20 function formatDate(ns){ return new Date(parseInt(ns) * 1000).toLoca ...

  6. 第21章、OnItemSelectedListener事件(从零开始学Android)

    在Android App应用中,OnItemSelectedListener事件也会经常用到,我们一起来了解一下. 基本知识点:OnItemSelectedListener事件 一.界面 1.新建pr ...

  7. php编译安装后,加扩展模块

    1.进入php源码包中,找到需要安装的扩展模块目录. cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序. /usr/local/bin/php ...

  8. poj 1659 Frogs&#39; Neighborhood 度序列可图化 贪心

    题意: 对一个无向图给出一个度序列,问他是否可简单图化. 分析: 依据Havel定理,直接贪心就可以. 代码: //poj 1659 //sep9 #include <iostream> ...

  9. 【转】DevOps原则

    DevOps的出现有其必然性.在软件开发生命周期中,遇到了两次瓶颈. 第一次瓶颈是在需求阶段和开发阶段之间,针对不断变化的需求,对软件开发者提出了高要求,后来出现了敏捷方法论,强调适应需求.快速迭代. ...

  10. 距特征之k阶距概念

    k阶原点距和k阶中心距各是说明什么数字特征 http://www.cnblogs.com/emanlee/archive/2011/04/25/2028628.html 二阶中心距,也叫作方差,它告诉 ...