去掉inline-block元素之间水平空白的功能实例

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。
今天在做柱状图的时候，碰到这样的问题，我把每个柱子(li)都设置成display: inline-block，在标准浏览器下发现它们的水平方向上都有空白。用firebug看了一下，发现这个是浏览器加上去的。试了几个办法，都不是很理想，最后在这些柱子的容器(ul)上加了个word-spaceing: -1em就搞定了。
CSS代码如下：

      ul {        
        margin: 0;
        padding: 0;
        word-spacing: -1em;
      }
      ul li {
        display: inline-block;
        height: 300px;
        width: 30px;
        position: relative;
      }
      ul li {
        *display: inline;
      }
      .title,.prog {       
        position: absolute;
        text-align: center;
        width: 100%;
      }
      .title {
        background: yellow;
        bottom: 0;
        height: 20px;
      }
      .prog {
        background: red;
        bottom: 20px;
      }

     HTML代码如下：

   <ul>
      <li><span class=title>Mon</span><span style=height: 80% class=prog>80</span></li>
      <li><span class=title>Tue</span><span style=height: 10% class=prog>10</span></li>
      <li><span class=title>Wen</span><span style=height: 70% class=prog>70</span></li>
      <li><span class=title>Thu</span><span style=height: 30% class=prog>30</span></li>
      <li><span class=title>Fri</span><span style=height: 60% class=prog>60</span></li>
      <li><span class=title>Sat</span><span style=height: 50% class=prog>50</span></li>
      <li><span class=title>Sun</span><span style=height: 40% class=prog>40</span></li>
    </ul>