| li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1457 回帖数 0 |
 |
lanlan123 等级 ☆ 0 楼 发表于 2019/10/15 11:00:23 编 辑 |
|
|
北京蓝蓝设计是一家专注而卓越的UI界面设计公司,以良好的服务为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、嵌入式显示屏界面设计开发、图标icon设计、大型网站设计、用户体验、开发实施....是一家从用户研究、交互设计及优化咨询、软件和网站视觉设计、界面开发实施全方位提供解决方案的创新型设计公司。 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ 引起这种空白间隔的原因： 浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。 解决方案： 方法一： 既然是因为< li>换行导致的，那就可以将< li>代码全部写在一排，如下 <div class="wrap"> <h3>li标签空白测试</h3> <ul> <li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li> </ul> </div> 再刷新页面看就没有空白了，就是这么神奇~ 方法二： 我们为了代码美观以及方便修改，很多时候我们不可能将< li>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将 内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。 .wrap ul{font-size:0px;} 1但随着而来的就是 中的其他文字就不见了，因为其尺寸被设为0px了，我们只好将他们重新设定字符尺寸。 方法三： 本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。 欢迎访问,开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com |
||
| 1 |