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

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

---

  <ul class="box">
        <li>111</li>
        <li>222</li>
        <li>333</li>
  </ul>

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

inline-block1.jpg
这是由于行内元素之间本身存在间隙，display：inline-block将块级元素以行内元素展示后，当然也有间隙，就像两个a标签设置的链接之间也有间隙一样。如果我们不想要这个间隙，可以在<ul>中加入"font-size:0;"，注意，一定要在<li>中重新设置font-size的大小，前面的例子中已经设置了font-size，所以不用重复设置。设置完后：
2.jpg

---

• 想要所有的<li>排成一行，也可以用folat（浮动）。如图：
  3.jpg
  但现在出现一个新的问题就是list浮动之后脱离了文档流，box已经不能将它包裹在内，现在的box内没有任何元素而收缩成了一条线，如何能将box撑开？只需要再.box中加入overflow:auto;即可

试一试