• 网站首页
  • 网络编程
    • PHP笔记
    • JavaScript
    • HTML
    • AJAX
    • jQuery
    • Python
  • 数据库
    • MySQL
    • SQL Server
当前位置:首页 > 网络编程 > HTML

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

人气:63 时间:2018-09-26

这篇文章主要为大家详细介绍了去掉inline-block元素之间水平空白的功能实例,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧。
今天在做柱状图的时候,碰到这样的问题,我把每个柱子(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元素之间水平空白的功能实例的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

关键词:inline-block

您可能感兴趣的文章

转载请注明出处:512笔记
本文永久地址:http://www.512pic.com/175/1704-0.html
上一篇:CSS3不用图片做好看按钮的简单示例
下一篇:CSS文本自动换行的简单示例
最新文章
  • HTML 在textarea中选择文本的实现方法
  • CSS分页符示例
  • HTML 为元素添加一些透明度的简单方法
  • html 回到顶部的完整代码
  • HTML5 文本内容显示三行,多余部分显示...,点击全部展开
  • HTML/CSS 实现div居中、div内部元素垂直居中的简单示例
  • HTML,CSS,font-family:中文字体和英文名称对照表
  • html 数据显示、隐藏的简单示例
  • 百度编辑器ueditor自动排版首行缩进四个字符实现方法
  • Google AdSense 网页广告的代码添加示例
本月热门
  • 热门文章
    • html 实现 marquee 无缝滚动的方法示例
    • HTML5 文本内容显示三行,多余部分显示...,点击全部展开
    • html 数据显示、隐藏的简单示例
    • Google AdSense 网页广告的代码添加示例
    • CSS3文字描边的功能实例
    • html 多列等高实现方法
    • 百度编辑器ueditor自动排版首行缩进四个字符实现方法
    • CSS 设置图片垂直居中的示例
    • html 回到顶部的完整代码
    • HTML 为元素添加一些透明度的简单方法
    • CSS分页符示例
    • HTML 在textarea中选择文本的实现方法
    • HTML,CSS,font-family:中文字体和英文名称对照表
    • HTML移动端利用flex布局实现css图片垂直居中
    • HTML/CSS 实现div居中、div内部元素垂直居中的简单示例
    • :after伪类应用的简单示例
    • 【推荐】DIV+CSS入门菜鸟教程
    • HTML 让上下两个DIV之间保持一定距离或没有距离
    • html文字左右滚动代码
    • 阻止Firefox缓存input值的简单示例

All rights reserved. 512笔记. 网站地图 友情连接 招募投稿 广告服务