700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html 为什么ul不撑开 给li设置float浮动属性之后 无法撑开外层ul的问题。

html 为什么ul不撑开 给li设置float浮动属性之后 无法撑开外层ul的问题。

时间:2021-09-13 01:00:08

相关推荐

html 为什么ul不撑开 给li设置float浮动属性之后 无法撑开外层ul的问题。

以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的。

给li设置float浮动属性之后,无法撑开外层ul的问题。

ul{

border: 1px solid #000;

width: 200px;

height: auto;

margin-top: 100px;

}

li{

float: left;

list-style: none;

margin-left: 10px;

}

星期一星期二星期三星期四星期五星期六星期天

以上代码显示结果如图,ul的边框变成了一条线,没有被撑开,

可是我期望的效果是这样的:

4种解决办法:

第1种方法:在html代码里边给最后一个li后面加空元素清除浮动,div可以换成p或者其他。具体如下:

星期一星期二星期三星期四星期五星期六星期天

第2种方法:给ul设置固定的高度。

第3种方法:给ul设置overflow属性,也可以是overflow:hidden。

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

推荐阅读

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。