这篇文章主要为大家详细介绍了去掉inline-block元素之间水平空白的功能实例,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编罗X来看看吧。
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;
}
<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>
本文来自:http://www.q1010.com/175/1704-0.html
注:关于去掉inline-block元素之间水平空白的功能实例的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:inline-block
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。