如何去除inline-block中间的间隙

.box{
border:1px solid #ccc;
padding-left: 4px;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}

---

  

        
111
        
222
        
333
  

当我们用列表display：inline-block写导航条时，列表元素中间会出现间隙，如下图：

inline-block1.jpg

这是由于行内元素之间本身存在间隙，display：inline-block将块级元素以行内元素展示后，当然也有间隙，就像两个a标签设置的链接之间也有间隙一样。如果我们不想要这个间隙，可以在

中加入"font-size:0;"，注意，一定要在
• 中重新设置font-size的大小，前面的例子中已经设置了font-size，所以不用重复设置。设置完后：
  
  

  2.jpg

  ---

  • 想要所有的
  • 排成一行，也可以用folat（浮动）。如图：
    
    

    3.jpg
    
    但现在出现一个新的问题就是list浮动之后脱离了文档流，box已经不能将它包裹在内，现在的box内没有任何元素而收缩成了一条线，如何能将box撑开？只需要再.box中加入overflow:auto;即可

  试一试