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知识加实例.图演示 ...
随机推荐
- HTML&CSS基础学习笔记1.13—无序列表
无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无 ...
- Python subprocess执行持续输出shell命令的控制
研究了大半天,为了获取持续输出的shell指令结果,并对结果进行分析,一直因为无法控制subprocess开启的子进程头疼,研究了半天,参考众多大神的博客后,终于实现,目前已时间为控制点,在实际业务中 ...
- C 语言 输入字符串 并计算输入的字符的长度
int main(void) { char a[50];int i=0;char *j;gets(a);//输入字符串j=a;while(*j!='\0'){j++;//指针指向下一个数组字符i++; ...
- 获取android源码时repo的错误
今天用repo获取android源码:../bin/repo init -u git://android.git.kernel.org/platform/manifest.git出现问题:问题一:Tr ...
- JTA
http://blog.csdn.net/hengyunabc/article/details/19433947
- PYTHON线程知识再研习G--线程间通信Event
很多时候,线程之间会有互相通信的需要.常见的情形是次要线程为主要线程执行特定的任务,在执行过程中需要不断报告执行的进度情况.前面的条件变量同步已经涉及到了线程间的通信(threading.Condit ...
- STL 查找vector容器中的指定对象:find()与find_if()算法
1 从vector容器中查找指定对象:find()算法 STL的通用算法find()和find_if()可以查找指定对象,参数1,即首iterator指着开始的位置,参数2,即次iterator指着停 ...
- SelectSort 选择排序
//SelectSort (( O(n²))) public class TestSelectSort { public int[] selectSortArray(int[] arr){ int m ...
- LeetCode 191. Number of 1 Bits Question
题意:给你一个整数,计算该整数的二进制形式里有多少个“1”.比如6(110),就有2个“1”. 一开始我就把数字n不断右移,然后判定最右位是否为1,是就cnt++,否则就继续右移直到n为0. 可是题目 ...
- Android——LayoutInflater详解
在实际工作中,事先写好的布局文件往往不能满足我们的需求,有时会根据情况在代码中自定义控件,这就需要用到LayoutInflater. LayoutInflater在Android中是"扩展& ...