关于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的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

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。

See all articles