干掉Inline-Block中间的空格
来源:互联网 发布:手机有声朗读软件 编辑:程序博客网 时间:2024/06/07 14:17
我在前端开发过程中经常遇到两个Inline-Block元素中间出现空格的问题,特别是横向导航栏,于是打算写一篇文章记录一下。
问题大概是这样的:
我写了HTML,CSS代码如下
<ul> <li>1</li> <li>2</li> <li>3</li></ul>
li { display: inline-block; 省略掉其他代码...}
结果悲剧是这样的…
当然这不是我想看到的…于是google了下,大概是这样的:
Inline-block中间的间隔就像英文单词之间的空格,为了区分开每个block,所以这不算是‘bug’。
但是这不是我们想要的效果对吧~解决方法如下:
去掉空格
既然原因知道了,那就对症下药删掉空白不就行了,修改html代码变成这样。
<ul> <li>1</li><li>2</li><li>3</li></ul>
元素与元素之间的空白不见了,问题也就解决了。
不过代码看上去有点丑,再优化一下。
<ul> <li>1</li><!-- --><li>2</li><!-- --><li>3</li></ul>
看上去整洁一下了吧!
移动子元素
还可以通过移动子元素覆盖掉空格。根据间隔的大小,移动相应的距离就能轻松覆盖掉。简单地使用margin-right.
li { margin-right: -5px;}
margin-right
设置为负值,会导致右边的元素全部左移动。所以每个元素都设置属性margin-right
就很巧妙地覆盖掉了。当然5px是跟你的font
属性有关的。
不写结束标签
这算是一种比较奇葩的做法。在HTML5下不会有问题,但是不推荐使用。
<ul> <li>1 <li>2 <li>3</ul>
实验过,发现使用span
等标签会出现嵌套问题。
设置font-size为0
em…一开始在群上问的时候,很多人都推荐这个方法。可是用起来很别扭ei。
ul { font-size: 0px;}ul li { font-size: 16px;}
使用Flexbox
我相信flexbox将来肯定会发光发亮,可是现在兼容性不强~
ul.flexbox { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
其他
还有其他方法,比如使用float
代替…不过有时候并不能解决我们的问题。所以就不说了。
上面的几种方法,比较中意的是使用<!-- -->
注释掉。这样做不会增加多余的css
代码,而且兼容性很强。flexbox
用起来很爽,但是现在还用不上。
最后
最后的最后附上codepen。
See the Pen GJQywQ by Helkyle (@HelKyle) on CodePen.
嗯,写完以后不用再去google了。
- 干掉Inline-Block中间的空格
- 干掉行内元素(inline-block)间的空格
- inline-block在从左至右排列,中间的空隙
- 两个inline-block之间的空格去除方法
- inline-block元素间的换行符空格间隙问题
- display:inline block inline-block 的区别
- display:inline block inline-block 的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- inline/block/inline-block的特性
- display:inline、block、inline-block的区别
- inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- display:inline、block、inline-block的区别
- inline、block、inline-block的区别
- C++ 程序员如何迎接 Windows 10 的到来
- 天声人語 20150703
- java.net.SocketException:Software caused connection abort: recv failed 异常分析
- iOS 定义全局变量
- 在mac上搭建Android开发环境
- 干掉Inline-Block中间的空格
- 看Volley源码,对HTTP缓存机制分析
- android开发中使用Gson进行对象和Json之间的转换很方便
- Android studio DrawerLayout
- java学习笔记一 java类型信息(RITI和反射)
- (Inside Out) Web地图坐标系——TDT的神奇
- 有道词典Demo(WebView)
- 案例分析:基于消息的分布式架构
- Apache CXF框架简介