关于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 ...
随机推荐
- Servlet监听器及在线用户
Servlet中的监听器分为三种类型Ⅰ 监听ServletContext.Request.Session作用域的创建和销毁 (1)ServletContextListener (2)HttpSessi ...
- <Sicily>Funny Game
一.题目描述 Two players, Singa and Suny, play, starting with two natural numbers. Singa, the first player ...
- WinDBG help
WinDBG is a great, free tool. It is more powerful than Visual Studio's built-in debugger, but is har ...
- Centos安装masscan
1.yum install git gcc make libpcap-devel2.git clone https://github.com/robertdavidgraham/masscan3.cd ...
- bzoj2100 [Usaco2010 DEC]Apple Delivery苹果贸易
题目描述 一张P个点的无向图,C条正权路.CLJ要从Pb点(家)出发,既要去Pa1点NOI赛场拿金牌,也要去Pa2点CMO赛场拿金牌.(途中不必回家)可以先去NOI,也可以先去CMO.当然神犇CLJ肯 ...
- [NOIP2012提高组]国王游戏
题目:洛谷P1080.Vijos P1779.codevs1198. 题目大意:国王和每个大臣左.右手各写了一个数.规定每个大臣得到的金币数为他前面所有人左手的数字的乘积除以他自己右手的数(向下取整) ...
- neo4j nosql图数据库学习
neo4j 文档:https://neo4j.com/docs/getting-started/current/cypher-intro/ 1.索引 # 给某类标签节点的属性添加索引 CREATE I ...
- CMDB学习之六 --客户端请求测试,服务端api优化
客户端使用agent 请求测试,agent使用的POST 请求,使用requests模块 本地采集,汇报服务端 #!/usr/bin/env python # -*- coding:utf-8 -*- ...
- unity gitignore
/[Ll]ibrary/ /[Tt]emp/ /[Oo]bj/ /[Bb]uild/ /[Bb]uilds/ /Assets/AssetStoreTools* # Autogenerated VS/M ...
- Python 调用snmp自定义OID实现监控
http://kkkkkk.blog.51cto.com/468162/1172726 http://blog.csdn.net/mirahs/article/details/49619729