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

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

demo:

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

实现列表两端完全对其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. Sql server 各版本下载链接

    Sql Server 2008 R2 链接: https://pan.baidu.com/s/11WPcrUL64QT0zT0_9VTb8Q 提取码: 665l 密钥:JD8Y6-MQG69-P9M8 ...

  2. MyReport报表引擎1.2.0.1新功能

    一维码(Code128B)转换显示.  多联标题. 修正BugSum统计函数问题报表编辑器保存时没有生成新加入的单元格相关的xml数据 相关链接MyReport演示.产品站点 相关文章MyReport ...

  3. 用户空间&内核空间学习 & top命令 & time命令

    参考了这篇文章 http://www.ruanyifeng.com/blog/2016/12/user_space_vs_kernel_space.html 简单说,Kernel space 是 Li ...

  4. LSA、LDA

     Latent semantic analysis (LSA) is a technique in natural language processing, in particular distrib ...

  5. 适合新人学习的iOS官方Demo

    UICatalog.包括了绝大部分经常使用的UI,入门必备良药. 9  分段选择器 10滑动条 Slider 11stack view 12 分步条 13 开关 14 textfield 15text ...

  6. window服务器开站点(不通用)

    此文章为记录自己的配置流程,其他人不通用 网站服务器:Windows server 2008 R2 (IIS6.1) + Asp.net 数据库服务器:Windows server 2008 R2 + ...

  7. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序         假设 ...

  8. 浏览器开发者工具Chrome Developer Tool

    开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles   一直被墙 ...

  9. 使用 fetch 代替 ajax(在不支持的浏览器上使用 XHR); This kind of functionality was previously achieved using XMLHttpRequest.

    原生 JS Ajax,GET和POST 请求实例代码_javascript技巧_脚本之家 https://www.jb51.net/article/86157.htm 更新时间:2016年06月08日 ...

  10. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...