在编写HTML文件时，我们就会遇到，类似这样的问题
CSS文件： <style> ul{ list-style: none; } li{ width: 100px; height: 50px; line-height: 50px; background: hotpink; display: inline-block; text-align: center; } </style>HTML结构： <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul>
我们发现，li标签之间会存在空白格，这是由于，标签换行造成的，那么怎么去掉这些空白格呢？
有两个解决方案：
方案一：去掉li标签之间的换行
处理后的效果
方案二：给父级标签设置font-size:0px;给当前标签设置font-size：14px;
处理后的效果
<style> ul{ list-style: none; font-size: 0px; } li{ width: 100px; height: 50px; line-height: 50px; background: hotpink; display: inline-block; text-align: center; font-size: 14px; } </style> </head> <body> <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </body>
转载于:https://www.cnblogs.com/songdongdong/p/6443619.html
