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

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

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8">
<title>给li设置float浮动属性之后,无法撑开外层ul的问题。</title>
<style type="text/css">
ul{
border: 1px solid #000;
width: 200px;
height: auto;
margin-top: 100px;
}
li{
float: left;
list-style: none;
margin-left: 10px;
}
</style>
<body>
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
</body>
</html>

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

li

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

li

4种解决办法:

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

<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期天</li>
<div style="clear:both;"></div>
</ul>

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

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

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

推荐阅读

  1. Google Search Console移动设备易用性报错修复【已解决】
  2. 熊掌号中天级收录和周级收录的区别?
  3. 如何在没有插件的情况下为WordPress中的外部链接添加nofollow
  4. 在wordpress通过代码实现百度主动推送|手工提交|实时推送
  5. wordpress熊掌号站点天级收录链接提交代码【不用插件实现】
  6. 百度官方推出一款WordPress链接提交插件【baidu links submit】
  7. 什么是别名域(Aliasdomain)?
  8. 什么是子域(Subdomain)?

发表评论

电子邮件地址不会被公开。 必填项已用*标注