解决问题之一:font-size 影响页面布局

为实现效果如下:

在这里插入图片描述

遇到的问题:

实现方法,border bottom+right 然后 nth(4n)没有没有 right
但是这样会造成一个问题div之前会有空隙,如下图:
在这里插入图片描述

为什么会遇到这个问题,怎么解决?

原因:因为页面默认的font-size字体大小影响了

解决:重置body,html{font-size:0}或者可以直接在当前元素的父元素设置font-size:0,因为全局设置可能会影响到页面的其它地方,会造成明明写了字怎么页面不显示的问题,即:0*0的情况,这点需要注意。

实现方式具体如下:

// html
<div class="apply-lists">
  <ul>
  	<li><img src="pic1.png" alt="logo"><p>滴滴出行</p></li>
  	<li><img src="pic2.png" alt="logo"><p>富途证券</p></li>
  	...
  </ul>
</div>
//css
.apply-lists{
    width: 95%;
    margin: 0 auto;
    text-align: center;
}
.apply-lists li{
    font-size: 14px;
    text-align: center;
    line-height:19px;
    color: #535353;
    font-family:MicrosoftYaHei-Bold;
    display: inline-block;
    font-weight: bold;
    width: 24%;
    margin: 0 auto;
    border-bottom: 1px solid#ECECEC;
    border-right: 1px solid#ECECEC;
    position: relative;
    padding: 3% 0;
}
.apply-lists li img{
  width: 124px;
  height: 40px;
}
.apply-lists li:nth-child(4),li:nth-child(8),li:nth-child(12){
    border-right: none;
}
.apply-lists li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12){
    border-bottom: none;
}

猜你喜欢

转载自blog.csdn.net/qq_29954811/article/details/89554689