CSS解决display:inline-block产生的缝隙间隙-代码写在一行 设置字体大小为0 设置负margin
生活随笔
收集整理的这篇文章主要介绍了
CSS解决display:inline-block产生的缝隙间隙-代码写在一行 设置字体大小为0 设置负margin
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
问题:行内存在空隙
<style type="text/css">ul li{display: inline-block;border: 1px solid #000000;} </style> <body><ul><li>1111</li><li>2222</li><li>3333</li></ul></body>一、书写的时候，省略空格
<ul><li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li> </ul>二、设置父元素的font-size:0px，然后再设置各个子元素的font-size数值
ul{font-size: 0; } ul li{display: inline-block;border: 1px solid #000000;font-size: 14px; }<ul><li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li> </ul>三、负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值
就是后面的元素向前推进 把间隙给隐蔽掉
总结
以上是生活随笔为你收集整理的CSS解决display:inline-block产生的缝隙间隙-代码写在一行 设置字体大小为0 设置负margin的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 微信还信用卡失败退款要多久
- 下一篇： CSS的display:none与vis