去掉inline-block元素之间水平空白的代码案例
内容摘要
这篇文章主要为大家详细介绍了去掉inline-block元素之间水平空白的功能实例，有喜欢html的小伙伴可以来参考一下。
文章正文
这篇文章主要为大家详细介绍了去掉inline-block元素之间水平空白的功能实例，有喜欢html的小伙伴可以来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记。今天在做柱状图的时候，碰到这样的问题，我把每个柱子(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>
注：关于去掉inline-block元素之间水平空白的功能实例的内容就先介绍到这里
代码注释
作者：喵哥笔记
