关于li浮动的问题！求解_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

关于li浮动的问题！求解_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:04 PM

li求解浮动

先上图，

给li加入图片，然后设置第一个浮动，效果如上，，，可是，，
给li加上宽高之后就变成上面那样了，这是为什么，求解？

回复讨论(解决方案)

如果你想实现两列，那么ul设置两个li的宽，所有的li浮动即可

li是块状标签，本来就是要占用一行的，第一个你用了float:left，它左浮动让出右边的位置，第二个li就占用剩余的空间了，第二个没有浮动，就是占用一行了，所以最后一个就又另起一行了。第二种情况：li没有浮动，每个都是占一行，所以都是要换行的。

float设置后脱离正常流，第二个li元素上移

li设置宽度后，因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用，即第一行宽度内容已满，它里面的内容只能换行在第二行开始显示;而未设置宽度时，#one的宽度只是包含a字符的宽度，第二个li宽度默认则有100%UL的宽

第一种我懂，就是还是不太清楚为什么设了宽度之后，它的效果就不同了，（因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用）这句话我理解不了，求解答！谢谢

第一种我懂，就是还是不太清楚为什么设了宽度之后，它的效果就不同了，（因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用）这句话我理解不了，求解答！谢谢

浏览器渲染时，浮动元素叠加在正常流元素之上，第二个li元素宽度只有120px，高度自适应。而#one宽度也有120px，当它浮动至左端时，第二个li元素内容会靠近#one右端开始定位，空间不够时只能往下。你将第二个li元素宽度设置为大干120px，你也许就明白了

更多的时候，没必要太过纠结为什么会这样，因为这么干本身就是有兼容问题的，再比如文字环绕图片的效果，不同浏览器下呈现出来的也是不太一致的，没什么解决方案，只能是在做的时候就避开类似的布局

再比如，两个块级元素想在同排显示，很多人都会第一个设置浮动，第二个靠挤上来的方案，但是该种做法在IE6/7下符合一定条件时，会产生莫名的空白间隙，没法解决，只能统一设置浮动

如果你真的想要知道为什么会这样，我想你得从各大浏览器的底层渲染机制去了解，即便你了解了，也会避开类似的布局

声明

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

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。