实现列表两端完全对其text-aligh:justify 和display:inline-block
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,里面就是个
(不可缺),复制的个数一般就是每行元素的列表个数啦,这样肯定可以保证最后一行元素一定是左对齐排列的啦
- .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的更多相关文章
- XPATH 要想获取的东西里不分段,不变成列表就用STRING(),不用TEXT()
简单说一说: requests配合xpath来抓网站数据的时候,不像selenium+xpath. selenium有 find_element find_elements,区别是带S ,查找第一 ...
- HTML 网页特效CSS大全
css属性代码大全一CSS文字属性:color : #999999; /* 文字颜色*/font-family : 宋体,sans-serif; /* 文字字体*/font-size : 9pt; / ...
- css样式大全
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...
- css 样式大全
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...
- html + CSS
Html 1 html基本标签 1.1 html文件结构 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN&qu ...
- 常见常用的CSS
字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...
- 前端学习-基础部分-css(一)
开始今日份整理 1.CSS的导入方式 CSS的导入方式主要是有内联模式,行内模式,外部样式表 1.1 内联模式 内联模式:直接在<head>中直接写css,例如 p{ color:rgb( ...
- CSS样式整理大全
转载自:http://www.cnblogs.com/laihuayan/archive/2012/07/27/2611111.html 字体属性:(font) 大小 {font-size: x-la ...
- CSS属性大全
字体属性:(font)大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style:oblique;(偏 ...
随机推荐
- Sql server 各版本下载链接
Sql Server 2008 R2 链接: https://pan.baidu.com/s/11WPcrUL64QT0zT0_9VTb8Q 提取码: 665l 密钥:JD8Y6-MQG69-P9M8 ...
- MyReport报表引擎1.2.0.1新功能
一维码(Code128B)转换显示. 多联标题. 修正BugSum统计函数问题报表编辑器保存时没有生成新加入的单元格相关的xml数据 相关链接MyReport演示.产品站点 相关文章MyReport ...
- 用户空间&内核空间学习 & top命令 & time命令
参考了这篇文章 http://www.ruanyifeng.com/blog/2016/12/user_space_vs_kernel_space.html 简单说,Kernel space 是 Li ...
- LSA、LDA
Latent semantic analysis (LSA) is a technique in natural language processing, in particular distrib ...
- 适合新人学习的iOS官方Demo
UICatalog.包括了绝大部分经常使用的UI,入门必备良药. 9 分段选择器 10滑动条 Slider 11stack view 12 分步条 13 开关 14 textfield 15text ...
- window服务器开站点(不通用)
此文章为记录自己的配置流程,其他人不通用 网站服务器:Windows server 2008 R2 (IIS6.1) + Asp.net 数据库服务器:Windows server 2008 R2 + ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序 假设 ...
- 浏览器开发者工具Chrome Developer Tool
开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles 一直被墙 ...
- 使用 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日 ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...