不知道大家有没有碰到过设置了display:inline-block;的几个相邻元素之间有几px间距的问题,这里提供几种简单实用的解决方法,希望能够帮到大家!
 
  方法1. 将<li>标签之间的空格与换行全部去掉,这也是我比较常用的一种方法
  原html代码:
<ul>
<li>控球后卫</li>
<li>得分后卫</li>
<li>小前锋</li>
<li>大前锋</li>
<li>中锋</li>
</ul>

  css代码:

* {
margin:;
padding:;
box-sizing: border-box;
}
body {
background: #bbb;
}
ul {
list-style: none;
width: 800px;
height: 40px;
background: #BF0D0D;
font-size: 20px;
color: #fff;
line-height: 40px;
margin: 50px;
}
ul li {
display: inline-block;
width: 160px;
text-align: center;
border-right: 1px solid #8E0303;
}
ul li:last-child {
border-right: none;
}

  运行效果:

  我们发现li的宽度160px乘以5不就等于ul的宽度800px吗,那为什么“中锋”这个li还被挤下来了,难道是小球时代传统中锋被集体抛弃的原因吗?哈哈当然不是,这其实是由于inline-block的特性导致,只要是存在空格或者换行的相邻inline-block元素,显示出来就会有几个px的间距。那我们对html结构作以修改:
<ul>
<li>控球后卫</li><li>得分后卫</li><li>小前锋</li><li>大前锋</li><li>中锋</li>
</ul>
  改成这样之后我们发现中锋又回去了:

  但是将他们都放在一行的这种做法非常影响代码的可读性,我们可以将它改成这样:
<ul>
<li>控球后卫</li><!--
--><li>得分后卫</li><!--
--><li>小前锋</li><!--
--><li>大前锋</li><!--
--><li>中锋</li>
</ul>
  也就是在相邻的元素之间加上空白的html注释,变相地取消了他们之间的空白节点。还有其他的几种改法这里不一一列举,大家也可以自由发挥,只要是取消了相邻元素之间的空白节点就能达到目的。
 
  方法2. 去掉结束标签
  如下:
<ul>
<li>控球后卫
<li>得分后卫
<li>小前锋
<li>大前锋
<li>中锋
</ul>
  这样也能得到理想中的结果,但如果要兼容低版本IE,最后一个列表项的结束标签还是要加上的。
 
  方法3. 使用负边距
  改动代码如下,其他代码不变:
ul li {
display: inline-block;
width: 160px;
text-align: center;
border-right: 1px solid #8E0303;
margin-right: -10px;
}
ul li:last-child {
border-right: none;
margin-right:;
}
  这样也能解决问题,其中,margin-right的大小并不是固定的,它和字体大小以及字体都有关系,大家可以查阅张鑫旭老师的一篇博客(http://www.zhangxinxu.com/wordpress/2010/11/%e6%8b%9c%e6%8b%9c%e4%ba%86%e6%b5%ae%e5%8a%a8%e5%b8%83%e5%b1%80-%e5%9f%ba%e4%ba%8edisplayinline-block%e7%9a%84%e5%88%97%e8%a1%a8%e5%b8%83%e5%b1%80/)中第六部分的表格,也可以在自己的代码中进行试验,直到试出合适的值为止。
   这几种方法基本上能够解决实际开发当中的大部分问题,当然还有许多其它的解决方案,也欢迎大家留下更加神奇的方法!

inline-block元素间距问题的几种解决方案的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  4. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  5. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  6. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  7. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  8. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  9. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

随机推荐

  1. Android指纹解锁

    Android6.0及以上系统支持指纹识别解锁功能:项目中用到,特此抽离出来,备忘. 功能是这样的:在用户将app切换到后台运行(超过一定的时长,比方说30秒),再进入程序中的时候就会弹出指纹识别的界 ...

  2. 线性数据结构之栈——Stack

    Linear data structures linear structures can be thought of as having two ends, whose items are order ...

  3. python之路 - 基础1

    1.安装windows安装双版本Python2,Python3 下载Python2和Python3https://www.python.org/downloads/ 分别安装两个版本 进入Python ...

  4. 06.SQLServer性能优化之---数据库级日记监控

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 之前说了一下数据库怎么发邮件:http://www.cnblogs.com/duniti ...

  5. 利用on和off方法编写高效的js代码

    先说下将这个话题的起因:最近发现公司的功能代码,很多在dom对象删除以后,其声明的绑定在window上的resize事件还一直存在,导致相同的功能代码执行了几次.对于我这种轻微代码洁癖的人来说,简直是 ...

  6. Emoji选项列表

    一.需要的前提文件 从网上下载Emoji的表情包,当然是png的图片,因为WPF不支持彩色的Emoji,所以,做列表的时候,需要用图片. 随着压缩包一起的还有一个Emoji.xml文件,文件的层级结构 ...

  7. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  8. ASP.NET MVC关于Ajax以及Jquery的无限级联动

    ---恢复内容开始--- 第一次发表博文,发表博文的目的是巩固自己的技术,也能够共享给大家.写的不好的地方,希望大家多给给意见.老司机勿喷 数据结构() NewsTypeId 新闻ID, NewsTy ...

  9. 设计模式之单例模式(Singleton)

    设计模式之单例模式(Singleton) 设计模式是前辈的一些经验总结之后的精髓,学习设计模式可以针对不同的问题给出更加优雅的解答 单例模式可分为俩种:懒汉模式和饿汉模式.俩种模式分别有不同的优势和缺 ...

  10. iOS开发 判断当前APP版本和升级

    从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...