资讯专栏INFORMATION COLUMN

去除display:inline-block的间隙问题

caiyongji / 480人阅读

摘要:元素间间距方案方案方案该值与父级字体大小有关方案其他更多方案

inline-block元素间间距demo


  • item1
  • item2
  • item3
  • item4
  • item5
方案 1
ul:{
font-size:0;
}
方案 2
  • item1
  • item2
  • item3
  • item4
  • item5
//or
  • item1
  • item2
  • item3
方案 3
li {margin-right: -3px;} 

-3px,该值与父级字体大小有关

方案 4
  • item1
  • item2
  • item3
  • item4
  • item5

6 其他更多方案 more

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114841.html

相关文章

  • 深入css之去除inline-block元素之间多余间隙

    摘要:父容器设置优点弹性布局可以去除多余间隙,而且可以轻松的实现垂直居中,水平居中等效果。缺点过低版本的浏览器不支持该属性。 什么是inline-block之间的多余间隙 考虑以下代码: One Two Three nav a { display: inline-block; //或者inline; padding: 5px; background: red; }...

    caspar 评论0 收藏0
  • inline-block兼容及间隙问题

    摘要:一兼容性不识别但可以触发块元素,其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置,使用触发。 一、兼容性: 1. IE6、IE7不识别inline-block但可以触发块元素,其它主流浏览器均支持inline-block。 注:在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致 原因分析:使用inline-block属性在IE下会...

    learn_shifeng 评论0 收藏0
  • inline-block兼容及间隙问题

    摘要:一兼容性不识别但可以触发块元素,其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置,使用触发。 一、兼容性: 1. IE6、IE7不识别inline-block但可以触发块元素,其它主流浏览器均支持inline-block。 注:在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致 原因分析:使用inline-block属性在IE下会...

    binaryTree 评论0 收藏0
  • 去除display:inline-block间隙问题

    摘要:元素间间距方案方案方案该值与父级字体大小有关方案其他更多方案 inline-block元素间间距demo item1 item2 item3 item4 item5 ul{list-style: none;} li{display: inline-block;} 方案 1 ul:{ font-size:0; } 方案 2 item1i...

    Aomine 评论0 收藏0
  • css去除inline-block间隙

    摘要:先问为什么的元素会存在间隙参考上的一个答案去除方法除空格和换行测试测试测试也可以更改成这样测试测试测试使用设置负边距此方法不靠谱,在不同的浏览器下空格的大小并不统一,无法一次性解决问题火狐极速使用在父级元素上设置为,在元素上 先问为什么display:inline-block的元素会存在间隙? 参考overstackflow上的一个答案 This is exactly what the...

    ad6623 评论0 收藏0

发表评论

0条评论

caiyongji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<