inline-block元素间距问题的几种解决方案-白红宇

inline-block元素间距问题的几种解决方案

阅读量：6081 次

发布时间：2019-06-20

本文共 1939 字，大约阅读时间需要 6 分钟。

　不知道大家有没有碰到过设置了display:inline-block;的几个相邻元素之间有几px间距的问题，这里提供几种简单实用的解决方法，希望能够帮到大家！

方法1. 将<li>标签之间的空格与换行全部去掉，这也是我比较常用的一种方法

　　原html代码：

　　css代码：

* {
          margin: 0;    padding: 0;    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结构作以修改：

　　改成这样之后我们发现中锋又回去了：

　　但是将他们都放在一行的这种做法非常影响代码的可读性，我们可以将它改成这样：

　　也就是在相邻的元素之间加上空白的html注释，变相地取消了他们之间的空白节点。还有其他的几种改法这里不一一列举，大家也可以自由发挥，只要是取消了相邻元素之间的空白节点就能达到目的。

方法2. 去掉结束标签

　　如下：

　　这样也能得到理想中的结果，但如果要兼容低版本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: 0;}

　　这样也能解决问题，其中，margin-right的大小并不是固定的，它和字体大小以及字体都有关系，大家可以查阅张鑫旭老师的一篇博客（）中第六部分的表格，也可以在自己的代码中进行试验，直到试出合适的值为止。

　　这几种方法基本上能够解决实际开发当中的大部分问题，当然还有许多其它的解决方案，也欢迎大家留下更加神奇的方法！

转载于:https://www.cnblogs.com/zhouhuan/p/inline_block_space.html

你可能感兴趣的文章