行内块空白解决方案

举下面这个例子：

    
    




    One
    Two
    Three

效果图：

spaces.png

接下来将讨论如何将图片衔接在一起。在导航的情况下，它可以避免小的不可点击的间隙。

一.删除空格

空格产生原因：在元素之间有空格（一个换行符和几个制表符被视为一个空格。
解决方案：

    

    

        One

        Two

        Three
    




    

    
One
Two
Three
    




    

    
One
Two
Three
    

二.设置负边距

  nav ul li{
        display: inline-block;
        margin-right: -5px;
        background: red;
    } 

在较老的浏览器有问题，但可保持代码格式。

三.跳过结束标记

    

    
One
    
Two
    
Three
    

虽然有效，但看着很奇怪。

四.直接用float实现

 ul {
        position: relative;
        left: 50%;
        top: 0;
        padding: 0;
        margin: 0 auto;
        display: block;
        float: left;
        clear: right;
        list-style: none;
        background: red;
    }
    li {
        position: relative;
        right: 50%;
        top: 0;
        padding: 10px;
        display: block;
        float: left;
        border: 1px solid black;
    }
    body {
        padding: 20px 0 50px 0;
        background: pink;
        border: 20px solid white;
    }

五。直接用flexbox实现

    nav ul{
        display: flex;
        padding: 5px;
    }
    li{
        list-style: none;
        background: slategrey;
        display: inline-block;
        /* inline block hack for IE 6&7 */
        zoom: 1;
        *display: inline;
        padding: 4px;
        color: white
    }