服务热线:18243769982

解决div元素或UL、li在经过float后父层无法撑开的问题

网站首页 > 文章中心 > 酷站领地建站教程 > div+css相关浏览:2044
此页为本站2017/9/6 1:34:36原创文章,转载请注明出处

最近开发论坛程序,帖子内容页需要有左边层和右边层,其中左边是用户信息,右边是帖子内容。

但是当我们做ui li之后,发现li的底边框border-bottom设置好像素和元素后,跑到上面去了。这个原因是因为LI中的两个DIV因为要并排,采用了float:left形式,这种浮动会使得LI无法按照内部的DIV层而撑开。

这是设计时的代码。

那么怎么解决呢?

一共有5中方法

第一种方法:

在LI或元素内层的最父级DIV(父LI内的样式为floor的DIV层)外层的内部,加入<div style="clear:both"></div>,问题解决。

第二种方法:给LI设置一个高度。但是这种方法因为LI中的元素如果会有很大的高度变化的话,建议不采用次方法,除非LI整体都是固定的。

第三种方法:给LI或最父级DIV设置单独的overflow:hidden或overflow:auto,如<li style="overflow:hidden"><div class="floor" style="overflow:hidden">,问题得到解决。

第四种方法:给LI加浮动属性,可以换成float:right,但是很有可能布局就会受到影响。

第五种网友给出的方法

用伪元素 :after{

content:"";

display:block;

clear:both;

}

最终实现效果和目的

在给LI加入style="overflow:hidden"后,LI完美的被撑开了,同时Floor层也完美的展开。做好排版后,我们最后去掉这些边框颜色就达到目的啦!