欢迎光临万书涛的个人博客

自适应网页中li模块如何等距分布

作者:万书涛  / 日期:2021-07-23 21:57:58 /  来源:本站原创 /   浏览:
摘要
在css布局网页过程中,经常要用到li标签,尤其是在同一个类型的多个相同元素布局时比较常用,而面临的一个问题是在自适应网页中由于网页要动态适配不同的分辨率,导致li标签之间的距离换算比较麻烦,那么这种情况,如何让所有的li元素都能等距离分布且居中对齐呢?下面万书涛就来谈谈这个问题。  
以前,在没有自适应的情况下,我们布局一个网页,只需要算出网页总的宽度,然后根据li标签自身的宽度,再加上margin边距,然后均分即可,这样可以保证在同一分辨率下各个li标签等距离。
 
但是随着自适应网页的发展,分辨率就不是固定的了,而是网页要适配不同设备的大小,同时还要兼顾各个li自身等距离分布以及在整个网页中居中分布,这个时候就要用到一个新的css布局方式了,那就是justify-content,这个justify-content能够比较好的适配《自适应网页》,能够把标签按照横向或者纵向对齐,可以选择头部、尾部、居中、以及分散对齐,比如这次,我们想居中对齐,那么就是justify-content: center,如果是分散对齐,那就是justify-content: space-around,注意,这里的display要是flex,表示弹性布局方式,详细代码和效果如下:
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
   width: 100%;

css应用效果截图

从上图可以看到,所有的li标签能够自动等距分布且居中对齐,上面代码中的-webkit是为了兼容不同内核浏览器而设置的,这里是为了兼容chrome、safari内核浏览器。
 
以上就是在自适应网页布局中常用的等距分布的布局方法。
 
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wzjszs/256.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息