一直用display:inline-block做某种导航栏还很爽,突然有一个柱状图的需求便也这么做了,于是成功被坑。

简简单单个需求,大致这样

只用几个li加上display:inline-block后代码是这样

li{
height: 400px;
width: 60px;
list-style: none;
background: #6ce;
display: inline-block;
}
ul{
padding-left: 30px;
border-bottom: 1px solid #333
}

效果是这样

不管是旁边还是下面都出现了小块空白

我们知道旁边的空白是由于li标签之间的空格,把html改成这样就好了

<li></li><li></li><li></li><li></li>

下面的空白可以设置

ul{
font-size: 0px
}

这样的话,不用密集的html结构,两种空白都可以解决

display:inline-block的坑的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. IdentityHashMap的使用场景

    IdentityHashMap的使用场景 JDK1.4就加入了这个map类型,它是使用 == 判断相等,而不是hashmap的equals方法判断相等. 那么,它有什么应用场合呢? 当然是需要我们必须 ...

  2. Sping mvc 环境下使用kaptcha 生成验证码

    一.kaptcha 的简介 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kap ...

  3. Python基本语法初试

    编程环境: win7旗舰版 Python 3.2.2(default, Sep  4 2011,09:51:08) 代码来源:(Python菜鸟) 代码内容: Python基本的输出语句print(& ...

  4. openfire+asmack搭建的安卓即时通讯(二) 15.4.9

    上期没有放成果图呢!忘了=-=,这就是上次的成果图,textview里面会显示登陆的名字(这个是默认管理员帐号=-=) 好吧,登陆了服务器我们就有了交互的功能啦可以说是前进了一大步呢!下面能我们就要试 ...

  5. dipole antenna simulation by HFSS

    工作频点为1GHz,新建工程,添加新设计,编辑添加下面的变量 建立天线模型,即两个金属圆柱.编辑完一个振子后,另一半可以用镜像命令产生参数如下设置 ,材料为PEC 两个圆柱间建立一个矩形片,连接两个圆 ...

  6. HFSS 边界条件

    Ansoft HFSS求解就是对微分形式的麦克斯韦方程采取有限元方法进行数值求解,在场矢量和导数是都单值.有界而且沿空间连续分布的假设下,这些方程才可以使用.在边界和场 源处,场是不连续的,场的导数变 ...

  7. codeforces 480B B. Long Jumps(贪心)

    题目链接: B. Long Jumps time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. ckplayer播放器去掉右边的开关灯分享插件

    在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单. 第一步:先打开ckplayer.js里找到下面三行删除掉 ...

  9. mac os利用xampp实现apache下的cgi

    折腾了两天终于把问题解决了,mac os是10.10.3..够新了吧 系统原生的apache配置cgi老是配不好,突然发现xampp也有macos版的,准备下下来试试. 安装完成后,打开apache服 ...

  10. POJ 2253 Frogger -- 最短路变形

    这题的坑点在POJ输出double不能用%.lf而要用%.f...真是神坑. 题意:给出一个无向图,求节点1到2之间的最大边的边权的最小值. 算法:Dijkstra 题目每次选择权值最小的边进行延伸访 ...