当前位置:Gxlcms > html代码 > 关于li浮动的问题!求解_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:35人阅读

先上图,

给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下 符合一定条件时,会产生莫名的空白间隙,没法解决,只能统一设置浮动

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

人气教程排行