目錄
回复讨论(解决方案)
首頁 web前端 html教學 关于li浮动的问题!求解_html/css_WEB-ITnose

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

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的宽

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

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



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


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

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



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

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

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

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1268
29
C# 教程
1248
24
如何用Python寫出求解最小公倍數的演算法? 如何用Python寫出求解最小公倍數的演算法? Sep 19, 2023 am 11:25 AM

如何用Python寫出求解最小公倍數的演算法?最小公倍數是指兩個數中能夠整除這兩個數的最小整數。在數學中,求解最小公倍數是一項基本的數學任務,而在電腦程式設計中,我們可以使用Python來寫一個求解最小公倍數的演算法。以下將介紹基本的最小公倍數演算法,並給出具體的程式碼範例。最小公倍數的數學定義是:若a能被n整除且b能被n整除,則n是a和b的最小公倍數。要求解最小

HTML、CSS和jQuery:製作一個有浮動效果的按鈕 HTML、CSS和jQuery:製作一個有浮動效果的按鈕 Oct 24, 2023 pm 12:09 PM

HTML、CSS和jQuery:製作一個帶有浮動效果的按鈕,需要具體程式碼範例引言:如今,網頁設計已成為一種藝術形式,透過使用HTML、CSS和JavaScript等技術,我們能夠為頁面增加各種各樣的特效和互動效果。本文將簡要介紹如何用HTML、CSS和jQuery製作一個帶有浮動效果的按鈕,並提供具體的程式碼範例。一、HTML結構首先,我們需要在HTML檔中

li是什麼元素 li是什麼元素 Aug 03, 2023 am 11:19 AM

li是HTML標記語言中的元素,用於建立清單。 li代表列表項,它是ul或ol的子元素,li標籤的作用是定義列表中的每個項目。在HTML中,li元素通常與ul或ol元素配合使用來建立有序或無序列表,無序列表使用ul元素,列表項以li元素表示,而有序列表則使用ol元素,同樣也用li元素表示。

html中li是什麼 html中li是什麼 Nov 19, 2021 pm 03:31 PM

在html中,li的英文全稱為“list item”,意思為“清單項目”,是定義清單項目的元素標籤,語法“<li>清單項目內容</li>”;“<li>”標籤可用在有序列表“<ol>”和無序列表“<ul>”中。

清除浮動有什麼方法 清除浮動有什麼方法 Feb 22, 2024 pm 04:00 PM

清除浮動有什麼方法,需要具體程式碼範例在網頁佈局中,浮動是一種常用的佈局方法,可以讓元素脫離文件流,並相對其他元素進行定位。然而,使用浮動佈局時常常會遇到一個問題,就是父元素無法正確地包裹浮動元素,導致頁面產生佈局錯亂的情況。所以,我們需要採取措施來清除浮動,使得父元素能夠正確地包裹浮動元素。清除浮動的方法有多種,以下將介紹常用的幾種方法,並給出具體的程式碼範例

用C語言程式實現最大公約數求解 用C語言程式實現最大公約數求解 Feb 21, 2024 pm 07:30 PM

標題:以C語言程式實現最大公約數求解最大公約數(GreatestCommonDivisor,簡稱GCD)是指能夠同時整除兩個或多個整數的最大正整數。求解最大公約數對於一些演算法和問題解決非常有幫助。在本文中,將透過C語言程式設計來實現求解最大公約數的功能,並提供具體的程式碼範例。在C語言中,可以使用歐幾裡得演算法(EuclideanAlgorithm)來求解最大

快速計算矩陣逆的方法 - Numpy實現 快速計算矩陣逆的方法 - Numpy實現 Jan 24, 2024 am 08:47 AM

Numpy是Python中著名的科學計算庫,為處理大型多維數組和矩陣提供了豐富的功能和高效的計算方法。在資料科學和機器學習領域,矩陣的逆運算是一項常見的任務。在本文中,我將介紹使用Numpy函式庫快速求解矩陣逆的方法,並提供具體的程式碼範例。首先,讓我們透過安裝Numpy庫引入它到我們的Python環境中。可以使用以下命令在終端機中安裝Numpy:pipinsta

css怎麼去掉li預設樣式 css怎麼去掉li預設樣式 Jan 28, 2023 pm 02:09 PM

css去掉li預設樣式的方法:1.建立一個HTML範例檔;2、新增li標籤內容;3、在css中透過將「list-style-type」屬性設為「none」即可去掉li預設樣式。

See all articles