如何解决inline-block缝隙问题

1.三行换成一行 让html元素没有间隔

    <li>按钮</li>
    <li>按钮</li>
    <li>按钮</li> 
    <li>按钮</li><li>按钮</li><li>按钮</li>​  

或者换成

    <li>按钮</li
    ><li>按钮</li
    ><li>按钮</li>​   

2.负magin值

    magrin-left:-4px; 

第一个会超出来 解决方法:

    .box>li:first-child{magrin-left:0;}​ 

3.浮动元素

    float:left​ 

必须清除浮动 父元素添加

    overflow:auto; 

4.父容器设0(最简单)

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,511评论 0 5
  • 问题 1. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 外边距合...
    Timmmmmmm阅读 500评论 0 0
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,232评论 0 1
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 806评论 0 0