float:left和display:inline一起用是什么意思？_html/css

首页

web前端

html教程

float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

		<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就自动移到下面去了，这是什么原因呢。

因为是个内联元素，与div不同，div是个块，display:block 是定义块（两者你看的到的区别就是换行会不会被解析）。你第一个块可以去掉左浮动，可以加到下面。关于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>

谢谢各位啊啊

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles