来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下。

1.flex布局,其实在移动端最合适的就是弹性布局,在移动端上解决问题使用flex最为合适,也很方便

#warp{
display: flex;
justify-content: flex-start;
border: 1px solid gray;
}

如果div过多,felx属性 flex-wrap默认属性nowrap,是不会换行的,只能默认的等比例压缩素有的div,

我们把flex-wrap设置为wrap就可以换行

当然除了从左到右,flex布局还可以这样,右侧对齐 flex-end

还可以这样 center

这样 space-around(每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍)

这样space-between(项目两侧对齐,项目之间的间隔相等)

详细的就不多说,可以去看阮老师的教程。

2.浮动float,虽然flex很方便,但是在pc上还是有兼容问题,在pc上float用的比较多,但是float也是有一些问题需要解决。

代码是这样的

#warp div{
background-color: #4cae4c;
height: 80px;
width: 200px;
text-align: center;
line-height: 80px;
border: 1px solid crimson;
float: left;
}

然后我们换个方向,注意顺序

float就是这些问题

1.最重要的是高度塌陷,父容器这个div已经变成了两条线,只剩下边框了,浮动之后脱离了文档流,父元素高度塌陷,我们需要给父元素加上伪类,然后清除浮动

2.顺序问题,当我们使用浮动,要注意浮动的顺序和我们div排列的顺序是一致的

3.display:inline-block 把元素设置为行内-块级元素,这样这些div就会顺序排列,这似乎是一种很好的解决办法,但是有空白。

这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙

通过给父元素设置 font-size: 0; ,使空白符不可见。但会导致子元素中继承的字体大小也为 0,解决方案:

    1. 可以明确子元素内字体大小的,为其单独设置文字大小。
    2. 可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属

关于li的排列,我的面试题的更多相关文章

  1. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  2. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  3. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  5. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  6. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  7. CSS中如何将li横向排列

    直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...

  8. css怎么让li水平排列和div居中

    让li向左浮动即可 给div定一个宽度,然后margin:0 auto;即可:

  9. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

随机推荐

  1. Word或Excel里画柱状图和折线图组合体

    不多说,直接上干货! 最近,在帮导师,干此项目.其中需要 现在,我带你来一步一步地画出来. 第一步:插入  ->  图表 第二步: 第三步:弹出,默认的数据和图表. 第四步: 第五步: 第六步: ...

  2. SharePoint 2010 开发人员学习指南

    kaneboy 翻译,一切内容版权归 Microsoft.1. SharePoint 开发起步教程 这是一个为准备进入到 SharePoint 开发领域的 .NET 开发人员所准备的免费在线学习课程. ...

  3. SSRS 报表 日期类表达式

    一.如何填写表达式 右键点击单元格-表达式 二.表达式 当月1号 =DateSerial(DatePart("yyyy",Now()), DatePart("m" ...

  4. PostgreSQL Replication之第三章 理解即时恢复(1)

    到现在为止,您已经掌握了一定的理论.因为生活不仅由理论组成(它可能同样重要),是时候深入实际的工作了. 本章的目标是让您明白如何恢复数据到一个给定的时间点.当您的系统崩溃或者有人意外地删除了一个表,不 ...

  5. vue 实现 点击取消监控内容是否发生修改 若修改提示 是否需要保存

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue.js小demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 学习Go语言之使用channel避免竞态问题

    // 使用channel避免竞态问题 package main import ( "fmt" "sync" ) var ( i int wg sync.Wait ...

  8. NOIP2017普及组题

    提高组死亡选手来AK普及(耗时两天). T1 #include<bits/stdc++.h> using namespace std; int A,B,C; int main() { ci ...

  9. NOIP2016 天天爱跑步(树上差分)

    题意 给定一棵树,从时刻 0 开始,有若干人从 S[i] 出发向 T[i] 移动,每单位时刻移动一条边 对于树上每个点 x,求 w[x]  时刻有多少人恰好路过 x N,M≤300000 题解 从上午 ...

  10. mac打包python3程序

    1. 下载安装py2app pip3 install py2app 2. 创建setup.py文件 py2applet --make-setup XXX.py 3. 发布应用 python3 setu ...