关于li的排列,我的面试题
来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下。
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,解决方案:
- 可以明确子元素内字体大小的,为其单独设置文字大小。
- 可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属
关于li的排列,我的面试题的更多相关文章
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- 无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- li 水平排列并自动填满 ul
找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...
- 无序列表li横向排列
一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- css怎么让li水平排列和div居中
让li向左浮动即可 给div定一个宽度,然后margin:0 auto;即可:
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
随机推荐
- Word或Excel里画柱状图和折线图组合体
不多说,直接上干货! 最近,在帮导师,干此项目.其中需要 现在,我带你来一步一步地画出来. 第一步:插入 -> 图表 第二步: 第三步:弹出,默认的数据和图表. 第四步: 第五步: 第六步: ...
- SharePoint 2010 开发人员学习指南
kaneboy 翻译,一切内容版权归 Microsoft.1. SharePoint 开发起步教程 这是一个为准备进入到 SharePoint 开发领域的 .NET 开发人员所准备的免费在线学习课程. ...
- SSRS 报表 日期类表达式
一.如何填写表达式 右键点击单元格-表达式 二.表达式 当月1号 =DateSerial(DatePart("yyyy",Now()), DatePart("m" ...
- PostgreSQL Replication之第三章 理解即时恢复(1)
到现在为止,您已经掌握了一定的理论.因为生活不仅由理论组成(它可能同样重要),是时候深入实际的工作了. 本章的目标是让您明白如何恢复数据到一个给定的时间点.当您的系统崩溃或者有人意外地删除了一个表,不 ...
- vue 实现 点击取消监控内容是否发生修改 若修改提示 是否需要保存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习Go语言之使用channel避免竞态问题
// 使用channel避免竞态问题 package main import ( "fmt" "sync" ) var ( i int wg sync.Wait ...
- NOIP2017普及组题
提高组死亡选手来AK普及(耗时两天). T1 #include<bits/stdc++.h> using namespace std; int A,B,C; int main() { ci ...
- NOIP2016 天天爱跑步(树上差分)
题意 给定一棵树,从时刻 0 开始,有若干人从 S[i] 出发向 T[i] 移动,每单位时刻移动一条边 对于树上每个点 x,求 w[x] 时刻有多少人恰好路过 x N,M≤300000 题解 从上午 ...
- mac打包python3程序
1. 下载安装py2app pip3 install py2app 2. 创建setup.py文件 py2applet --make-setup XXX.py 3. 发布应用 python3 setu ...