去掉inline-block元素之间的水平空白

今天在做柱状图的时候,碰到这样的问题,我把每个柱子(li)都设置成display: inline-block,在标准浏览器下发现它们的水平方向上都有空白。用firebug看了一下,发现这个是浏览器加上去的。试了几个办法,都不是很理想,最后在这些柱子的容器(ul)上加了个word-spaceing: -1em就搞定了。

代码如下:

<!doctype html>
<html>
	<head>
		<title>柱状图</title>
		<style type="text/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;
			}
		</style>
	</head>
	<body>
		<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>
	</body>
</html>

去掉inline-block元素之间的水平空白》上有2条评论

  1. 小寒 文章作者

    多谢您的提醒,因为我这里有文字,所以从开始就没有想到过设置font-size。

发表评论