如何去除inline-block中间的间隙

.box{
border:1px solid #ccc;
padding-left: 4px;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}


  <ul class="box">
        <li>111</li>
        <li>222</li>
        <li>333</li>
  </ul>

当我们用列表display:inline-block写导航条时,列表元素中间会出现间隙,如下图:

inline-block1.jpg

这是由于行内元素之间本身存在间隙,display:inline-block将块级元素以行内元素展示后,当然也有间隙,就像两个a标签设置的链接之间也有间隙一样。如果我们不想要这个间隙,可以在<ul>中加入"font-size:0;",注意,一定要在<li>中重新设置font-size的大小,前面的例子中已经设置了font-size,所以不用重复设置。设置完后:
2.jpg


  • 想要所有的<li>排成一行,也可以用folat(浮动)。如图:
    3.jpg

    但现在出现一个新的问题就是list浮动之后脱离了文档流,box已经不能将它包裹在内,现在的box内没有任何元素而收缩成了一条线,如何能将box撑开?只需要再.box中加入overflow:auto;即可

试一试

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 1,690评论 0 1
  • 本文转发自github, 原文地址 前端开发知识点: 作为一名前端工程师,无论工作年头长短都应该掌握的知识点: 此...
    XDUZ阅读 629评论 0 8
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,519评论 0 6
  • 今天,是我在浦东共青团度过的第七个五四青年节,如果算上2010年因为上海世博会在团市委挂职的那11个月,那已经是第...
    爱画画的倩儿阅读 3,996评论 26 24