css中易错漏点汇总(待续。。。)
1.display:inline-block和float,针对以下代码举例:
<nav class="menu"> <ul> <li class="choice1"><a href="#">Articles</a></li> <li class="choice2"><a href="#">Books</a></li> <li class="choice3"><a href="#">Resources</a></li> <li class="choice4"><a href="#">Bookshelf</a></li> <li class="choice5"><a href="#">Contact Me</a></li> <span>test</span> </ul>
</nav>复制代码
a).对<li>标签设置display:inline-block,<li>由纵向排列变为横向排列,但每个<li>之前出现了4px的间隔,可以通过getBoundingClientRect()输出各元素的left,right值查看。同时<li>标签前的黑色圆点消失。
b).4px的间隔产生的原因是<li>的换行,可以选择不换行,或者将父元素的字体大小设置为0,子元素设置字体大小(父级设置为0后,子级不能使用相对单位em),或参考:blog.csdn.net/ime33/artic…。<li>的圆点消失在于<li>默认display:list-item,设置为inline-block后改变了默认显示,将span标签设置display:inline-block也会出现圆点。
nav.menu ul{ font-size:0; }
nav.menu li{ display:inline-block; font-size:15px;/*父级为0时,子级不能使用相对单位em*/ }
nav.menu span{ display:list-item; }复制代码
c).对<li>标签设置float:left,<li>由纵向排列变为横向排列,但无法准确的保证整个<ul><li>在页面中居中。
d).解决float元素的居中问题,可以将<ul>设置为display:inline-block,,使<ul>收缩包紧横向排列的<li>,这时<ul>标签具有行内元素的特征,设置包裹<ul>标签的<nav>标签text-align:center,即可使<ul>在<nav>居中。
nav.menu{ text-align: center; font-size: 0.8em; }
nav.menu ul{ display: inline-block; /* 收缩包紧列表项*/ }
nav.menu li{ float: left; }复制代码
css中易错漏点汇总(待续。。。)相关推荐
- c语言中local status6,C语言中易错的地方(一)
c++中易错的地方 1:scanf int a; int b; scanf("%d-=%d",&a,&b); printf("a=%d,b=%d" ...
- c语言常考易错知识点,C语言中易错点知识点拾遗
C语言中易错点知识点拾遗 1. 首先,feof()是文件结束检测函数,如果没有结束,返回值是 0,结束了是 1 由于 feof(fp)返回 0 才 是没有结束,所以通常写成 while(!feof(f ...
- 浅谈c++中继承体系中易错点
浅谈c++中继承体系中易错点 目前,就我工作经验来看,在c++中继承体系中总爱搞错的有两点: 不把基类中需要覆盖的方法为设置为虚方法. 不把基类中的析构函数设置为虚方法. 就第一点而言,如果基类中需要 ...
- css中易掉坑的知识点总结系列(一)
今天在写css代码的时候,忽然发现很多看起来挺简单的,但是却忽略了它们的小知识点,小细节,所以就准备把自己遇到的易忘和易忽略的css知识点整理到一起,方便自己以后查阅,也希望同时能够帮助到您(主要是针 ...
- C语言系列(二):最近重拾C语言的想法,谈到C中易错点,难点;以及开源代码中C语言的一些常用技巧,以及如何利用define、typedef、const等写健壮的C程序...
写在前面的话:本系列主要是自己在c语言运用时,对一些不了解,但开源代码中常用的技巧,和一些c语言中偏门和易错点进行解析. 加入了自己的分析,如果不到位请多海涵,另外,引用一些非常好的文章(都有引用li ...
- CSS中易迅网三角形的制作
购物网站上的三角形非常常见,那么我们该如何实现呢,比如我们要实现易迅网上那种倒三角,如下图 首先如果一个盒子我们把它的宽高都设置为0,边框分别设置10个像素不同的颜色,我们看看会出现什么情况? < ...
- 数据库知识点4——关系代数中易错题的总结
1. 在关系代数运算中,五种基本运算为:并.差.选择.投影.乘积 2.关系如下图所示,查询既学习课程号为001课程又学习课程号为002号课程的学生的学号, 注:.关系代数操作运用∩符号表达 3. 关系 ...
- java的易错点_java中易错点
1.A instanceof B{这是没有好好利用java多态的表现} java中的二元操作符,测试A对象是否是B类的实例: 返回值:boolean类型 2."=="与 &quo ...
- SQL那些事(sql中易错的东西)
工作内容,不对外开放 文章目录 1.关于`AND route_name != 'hap'` 2.sql中的括号 1.关于AND route_name != 'hap' 信誓旦旦地加了一个条件AND r ...
最新文章
- linux命令行3d,Linux命令行快捷键
- linux下svn重新定位的方法
- Pytorch(六) --处理高维特征数据
- 来自Java空间的传送门
- 5 加盐_清洗桑葚时,有人加盐有人加碱,都不对!教你正确做法,太干净了
- JQuery Smart UI 简介 (一) — 纯Htm+Js的ajax开发框架[演示Demo已放出]
- 过滤掉文本中的javascript标签代码
- whereis命令详解
- 小米路由插件二维码2020_入门级Mesh首选?华来小方Mesh路由深度解析
- ISO50001认证辅导,ISO50001能源管理体系的框架审核通过系统的提高能源效率和消耗
- B1299 [LLH邀请赛]巧克力棒 博弈论
- i3处理器_千元英特尔10代I3处理器套装跑分72万?微星差异化赢得市场
- 密码学之BGN同态加密算法
- hadoop 报错 there appears to be a gap in the edit log. we expected txitd 1, but got txid 14444
- 微信ipad协议(PC版)源码demo
- Silverlight学习之调用bing搜索引擎进行网络搜索
- Cly的三角形 (思维+斐波那契)
- 皮尔森相关性的相似度
- 【Unity】获取模型的材质球贴图中的像素点色值
- springboot 使用 redis 监听 key 的过期回调( 模拟设置订单号超时时间, 触发修改订单状态业务逻辑)
热门文章
- Nexus 清理无用的 Docker 镜像
- 厉害了!13个GIS开源软件
- 课后自主练习 (进制)1014. i-1 进制(Easy)naive《编程思维与实践》个人学习笔记
- python爬虫抓取为空,或者网页提示:很抱歉,我们目前暂时不支持 IE 浏览器...
- react table组件
- 数字加上'0'变成字符类型
- 数字信号处理翻转课堂笔记7
- kripke structure
- Android学习笔记 二三 多页显示 Flipper的使用
- 让chatGPT 作为 面试官 / 辩手 / 演说家 / 哲学家 / SQL终端的 Prompt 命令