关于li浮动的问题!求解_html/css_WEB-ITnose
给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下 符合一定条件时,会产生莫名的空白间隙,没法解决,只能统一设置浮动
如果你真的想要知道为什么会这样,我想你得从各大浏览器的底层渲染机制去了解,即便你了解了,也会避开类似的布局
上一篇: slim框架如何使用视图和模板
推荐阅读
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
菜鸟:关于24小时循环倒计时的问题_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose
-
关于浏览器默认CSS的问题_html/css_WEB-ITnose
-
ul li的兼容性问题_html/css_WEB-ITnose
-
关于浏览器默认CSS的问题_html/css_WEB-ITnose
-
关于padding设置的问题_html/css_WEB-ITnose
-
再发-关于CSS+DIV首页的问题(入门级别)_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose
-
问个关于浮动的问题_html/css_WEB-ITnose