当li设置为line-block时,元素之间出现间隙的原因和解决方法
原因
因为浏览器默认把inline元素之间的空白符(Tab、空格、换行)渲染成一个空格。而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙。
用Chrome浏览器将场景模拟出来:
HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
CSS:
li {
display: inline-block;
border: 1px solid red;
}
在浏览器打开页面,如下图,li元素之间产生了间隙。
解决办法
1、从根本原因上找解决方案,既然li元素间的间隙是因为换行符导致的,则可以将li写成一行。
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
但该方案会导致HTML的代码可读性较差,一般不建议用此方法;
2、用margin去掉元素间隙。
li {
display: inline-block;
border: 1px solid red;
margin-left: -6px;
}
但因为每个浏览器的间隙不一样,导致margin-left的值也需不一样,存在浏览器兼容性问题,同样不建议用此方案;
3、用浮动去掉元素间隙。
li {
display: inline-block;
border: 1px solid red;
float: left;
}
4、将li的父级元素font-size设置为0,再在li中将font-size设置为正常值。
ul {
font-size: 0;
}
li {
display: inline-block;
border: 1px solid red;
font-size: 14px;
}
当li设置为line-block时,元素之间出现间隙的原因和解决方法的更多相关文章
- inline-block元素间隙问题原因及解决方法
inline-block元素间隙问题原因及解决方法 原因: 书写时由空格.换行或回车所产生空白符所致 解决方法: 方法1:font-size:0 方法2:改变书写方式 方法3:使用margin负值 方 ...
- display:inline-block元素之间空隙的产生原因和解决办法
在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block.但是你会发现这些同行显示的inline-block元素之间会出 ...
- tcp连接时,BROKEN PIPE错误的原因以及解决方法
问题: 写了一个server和一个client,UNIX套接字的,server不断接收消息并打印出来,client是一个交互程序,输入一个消息回车发送,接着又可以输入消息.出问题了:当server监听 ...
- apt-get update 更新 ubuntu时出现Hash sum mismatch的原因及解决方法
$ sudo apt-get update ...... Hit http://mirrors.163.com trusty/main Sources ...
- java写文件时,输出不完整的原因以及解决方法
在java的IO体系中,写文件通常会用到下面语句 BufferedWriter bo=new BufferedWriter(new FileWriter("sql语句.txt")) ...
- java写文件时,输出不完整的原因以及解决方法close()或flush()
在java的IO体系中,写文件通常会用到下面语句 BufferedWriter bw=new BufferedWriter(new FileWriter("sql语句.txt")) ...
- 鼠标聚焦到Input输入框时,按回车键刷新页面原因及解决方法
参考地址:http://blog.csdn.net/xuezhongsong/article/details/6859037 方式1:全局控制回车,13-回车键,27-ESC,113-F2 docum ...
- 鼠标聚焦到Text输入框时,按回车键刷新页面原因及解决方法
前提 一个form中只有一个输入框,当输入框获取焦点后,点击回车,导致整个页面都刷新,问题解决办法. 1.处理form 在form中添加事件 <form onsubmit="retu ...
- libevent在windows下用visual studio编译时出现error C2894错误的原因与解决方法
libevent是一个使用很广泛的网络库,今天想了解下它.于是去git clone了一份源码,用vs2005的命令行:nmake -f makefile.nmake编译之,顺利编译通过,生成三个静态库 ...
随机推荐
- sublime text3环境与工具搭建
1,ctrl+shift+P ,打开包安装窗口如下: 2,选择 install Package,安装详解插件 1-安装 JsFormat插件,用于格式化js的插件,使用快捷键 Ctrl+Alt+F对J ...
- UVA - 348Optimal Array Multiplication Sequence(递推)
id=19208">题目:Optimal Array Multiplication Sequence 题目大意:给出N个矩阵相乘.求这些矩阵相乘乘法次数最少的顺序. 解题思路:矩阵相乘 ...
- ruby for in 循环中改变i的值无效
ruby for in 循环中改变i的值无效 for j in 1..5 puts "#{j}hehe" j = j + 2 #break end 在循环中,使用j = j + 2 ...
- ant 调用
博客园 首页 新随笔 联系 订阅 管理 [图文] 使用ant编译和发布java项目 开发JavaEE项目经常会碰到修改代码后,项目没有重新编译的问题.老大给指明了一个解决办法:用ant ...
- Android——build.prop 解析【转】
本文转载自:http://blog.csdn.net/lengyue1084/article/details/77637354 一.概念 在Android设备shell终端可以看到/system目录下 ...
- android监听虚拟按键的显示与隐藏【转】
本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...
- php打马赛克
本文实例讲述了php实现图片局部打马赛克的方法.分享给大家供大家参考.具体分析如下: 原理: 对图片中选定区域的每一像素,增加若干宽度及高度,生成矩型.而每一像素的矩型重叠在一起,就形成了马赛克效果. ...
- A - Boy or Girl(set)
Problem description Those days, many boys use beautiful girls' photos as avatars in forums. So it is ...
- Android线程间异步通信机制源码分析
本文首先从整体架构分析了Android整个线程间消息传递机制,然后从源码角度介绍了各个组件的作用和完成的任务.文中并未对基础概念进行介绍,关于threadLacal和垃圾回收等等机制请自行研究. 基础 ...
- 状态模式(state)C++实现
状态模式 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类 ...