20220121工作记录CSS让ul水平居中+消除空白符(fontsize:0；)

一、让ul水平居中(display: table;margin: auto)

最近在写代码时&＃xff0c;想让ul水平居中&＃xff0c;就写了一个margin: auto;但是没效果&＃xff0c;后来发现加个display: table;才有效&＃xff0c;如下图&＃xff1a;【直接写margin: auto;无效&＃xff0c;需要加个display: table;后才有效】

二、消除空白符(font-size: 0;)

1、前言

最近一个项目里&＃xff0c;我给ul li设置display:inline-block;实现li在一行上&＃xff0c;却让ul出现了一定的高度&＃xff0c;如下图&＃xff1a;

2、解决方法

原因滴话&＃xff0c;见我百度到滴一位优秀博主的一篇优秀博客

话不多说&＃xff0c;解决方法就是给ul设置font-size: 0;就好啦

代码如下&＃xff1a;

HTML

<ul class&＃61;"title"><li><a href&＃61;"">首页a>li><li><a href&＃61;"">品牌介绍a>li><li><a href&＃61;"">课程体系a>li><li><a href&＃61;"">学员展示a>li><li><a href&＃61;"">师资力量a>li><li><a href&＃61;"">赛事考级a>li><li><a href&＃61;"">新闻资讯a>li>
ul>


CSS

.title {font-size: 0;
}
.title li {display: inline-block;padding: 0 30px;font-size: 20px;
}
.title li a {font-size: 20px;font-family: Source Han Sans CN;color: #FFFFFF;
}


解决后的结果&＃xff0c;见下图&＃xff1a;

3、总结

【下面这句话是写给自己滴&＃xff0c;嘻嘻&＃x1f60a;】

假如在写样式的过程中&＃xff0c;不知道为什么就出现了一定的间距或高度&＃xff0c;就可以试试设置font-size: 0;哟~

如下图&＃xff1a;【p自带一定高度】

给该p标签设置font-size:0;即可啦&＃xff0c;见下图&＃xff1a;