块级标签使用 display:inline-block;显示一行,存在多余的边距的bug解决办法
解决办法:
在父元素中使用:font-size:0;即可以解决
实例:
<template> <div class="home-page"> <ul class="navigator"> <li>推荐</li> <li>课程</li> <li>实践</li> <li>职业路径</li> <li><img src="../assets/history.png" alt="历史"></li> <li><img src="../assets/search.png" alt="搜索"></li> </ul> </div> </template> <style> .navigator{ background: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10); font-size: 0px; } .navigator li{ font-family: PingFangSC-Regular; font-size: 16px; color: #71777D; letter-spacing: 0; line-height: 18px; display: inline-block; margin-right: 20px; } .navigator li:nth-child(4){ margin-right: 65px; } .navigator li>img{ display: inline-block; width: 18px; height: 18px; } </style>