inline-block样式间距
原始问题和解决方法请参考 淘宝UED官方博客:inline-block 前世今生
布局时采用行内块display:inline-block,发现元素之间有空隙,原因是由于空白字符引起的,详细见上面链接.
本网站首页采用了行内块,标记如下
<ul>
<li>
<a>(样式是 display:inline-block)
<a>(样式是 display:inline-block)
<a>(样式是 display:inline-block)
...
<li>
</ul>
a之间有空隙,a并没有边框、内补、外距等
解决办法,参考自上面链接,并做过FF(32.0.3) IE6-11 chrome(版本 35.0.1916.114 m)的测试
1.给父级元素设置
font-size:0 // 空隙的产生由于空白字符,所以将字体设为零,空白字符也没了.至于为什么,参考上面链接.
*word-spacing:-1px; // 使IE6,7兼容,即使字体设0了,还是有1像素的间距
2.给行内块元素设置
display:inline-block;
font-size:16px; // 此处要重设字体大小
vertical-align:top; // 行内块元素可设置这个对齐属性
*display: inline; // IE6,7
*zoom:1; // IE6,7
inline-block样式间距的更多相关文章
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- 把display 属性改为block样式变化问题
可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
随机推荐
- PHP数据过滤
1.php提交数据过滤的基本原则 1)提交变量进数据库时,我们必须使用addslashes()进行过滤,像我们的注入问题,一个addslashes()也就搞定了.其实在涉及到变量取值时,intval ...
- 自适应 or 移动前端页面布局的问题?
说出来,还请各位看官不要笑 - -.哥们至今不是很清楚页面的自适应和移动前端页面开发有什么区别 .有幸哪位看官清楚这些的话,希望能不吝赐教 .A.meta <meta name=& ...
- Activiti工作流学习-----基于5.19.0版本(4)
四.使用工作流开发 org.activiti.engine.ProcessEngine提供的Service作用在工作流引擎上面,如果所示是模仿一个公司简单的审批流程,你可以下载这个Demo:Activ ...
- cf C. Dima and Salad
http://codeforces.com/contest/366/problem/C 转化为背包问题,可以将a[i]-b[i]*k看成重量,a[i]为价值: 因为a[i]-b[i]*k可以为负数,所 ...
- STARTUP.A51详解
STARTUP.A51 这个文件有什么用,有必要添加到工程吗? 如果不添加"startup.a51"文件,编译器就会自动加入一段初始化内存以及堆栈等的代码,这时的内存初始化部分你就 ...
- FastMM内存泄露
转自:http://www.2ccc.com/article.asp?articleid=4879FastMM是非常优秀的内存管理器,但是从FastMM4Options.inc中找到合适自已程序的选项 ...
- 各类XML parser的比较
基于以上的比较 再为公司的项目选择解析器的时候,我选择Xerces.准备把Qt自带的XML库给去掉. references: http://stackoverflow.com/questions/17 ...
- c#发送邮件样例
1.通过gmail邮箱发送邮件 try { MailMessage mail = new MailMessage(); SmtpClient SmtpServer = new SmtpClient(& ...
- 黑马程序员_Java面向对象_包
7.包 7.1包(package) 对类文件进行分类管理. 给类提供多层命名空间. 写在程序文件的第一行. 类名的全称是:包名.类名. 包也是一种封装形式. 利用命令行自动生成文件夹格式:D:\jav ...
- cf493B Vasya and Wrestling
B. Vasya and Wrestling time limit per test 2 seconds memory limit per test 256 megabytes input stand ...