<nav> <ul> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="images/flower.png" class="lazy" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="images/flower.png" class="lazy" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="images/flower.png" class="lazy" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li> <li><a href="#"><img src="/static/imghwm/default1.png" data-src="images/flower.png" class="lazy" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li> </ul> </nav>
nav ul li{ float: left; width: 72px; display: inline;}nav li a { display:block;}
上面是html,css和效果图
回复讨论(解决方案)
有几个问题:
1,为什么li里float left和display inline同时使用?感觉作用是差不多的。网上了解下,li是个半block元素,是不是跟这个有关系?
2,a里为什么要display: block,而且去掉后效果似乎也没什么改变。
3,文字“FL”本来和图片是并排的,css里设置width变成72px后,FL就自动移到下面去了,这是什么原因呢。
有几个问题:
1,为什么li里float left和display inline同时使用?感觉作用是差不多的。网上了解下,li是个半block元素,是不是跟这个有关系?
2,a里为什么要display: block,而且去掉后效果似乎也没什么改变。
3,文字“FL”本来和图片是并排的,css里设置width变成72px后,FL就自动移到下面去了,这是什么原因呢。
第一个:好像见过,不是前端,但是了解过一些,dispaly:inline;IE6盛行时,这一行解决很多兼容问题。
第二个:display:block;是让以块的显示展现,不是没有变化,你background一下,加与不加区别是很大的。
第三个:你定义了li的宽度是72,而图片宽度是68,FL也是占位置的,假如说你设定的font-size是10px的话,那么图片加上FL的宽度就达到88,超过了你定义的72,肯定就换行了
float之后 display:inline 是解决ie6 产生双倍边距的问题
displayinline 是为了解决IE的BUG的
<!DOCTYPE html><html><head><style>nav ul li{ float: left; /* width: 72px; *//* 72 - 68 = 4px 不够容纳后面文字的宽度了, 会把文字挤到下一行 */ width: 120px; /* 120 - 68 = 52px 如果足够容纳后面文字的宽度, 就不会把文字挤到下一行 */ display: inline;}nav li a { /* display: block; */}nav li a:hover { /* 在 a 有或者无 display: block; 时分别查看 a 显示出的形状和尺寸 */ background-color: red; border: 3px blue solid;}nav li a img{ width: 68px; height: 54px;}</style></head><body><nav><ul><li><a><img src="/static/imghwm/default1.png" data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" class="lazy" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li><li><a><img src="/static/imghwm/default1.png" data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" class="lazy" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li><li><a><img src="/static/imghwm/default1.png" data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" class="lazy" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li><li><a><img src="/static/imghwm/default1.png" data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" class="lazy" / alt="float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose" >FL</a></li></ul></nav>如果没有 float: left; 此处这些文字将在所有的 li 元素下面换行显示, 否则将接在最后一个 li 元素的右边显示<br><br>li 的默认 display 属性是 list-item, 这个属性一是让 li 象 block 元素一样是矩形形状, 并且独占一行, 另外还在它之前有一个 marker box, 默认样式下, 这个 marker box 会是显示为一个黑圆点<br><br>li {display: inline} 让 li 不再独占一行, 宽度上只会得到必要的而不是占有所在容器的全宽,另外也去掉了 marker box.<br><br>display: block 让一个元素显示成矩形, 在尺寸是 auto 时, 浏览器会给它分配足够的 height 和 width 以容纳它的内部无素.<br><br>a 元素默认是一个 inline 元素, 不保证始终是一个矩形, 此例中, 浏览器自动计算的高度可能会不够容纳内部的 img 元素, 而只是文本所需的高度.</body></html>
谢谢各位啊啊

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

禅工作室 13.0.1
功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Atom编辑器mac版下载
最流行的的开源编辑器