为了账号安全,请及时绑定邮箱和手机立即绑定

为什么第一个div中的第一列不换行,而且div不是块级元素吗,不应该自动换行吗,并且我给div设置css样式为什么ul也包裹在里面?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>实践题-选项卡</title>

<style type="text/css">

/* CSS样式制作 */  

   li{

   

   list-style-type:none;

   float:left;

   border:1px black solid;

   width: 60px;

   height: 30px;

   text-align: center;

   line-height: 30px;

   }

   div{

   border-top:chocolate solid 1px;

   border: blue solid  1px;

   width: 300px;

   }

</style>

<script type="text/javascript"> 

// JS实现选项卡切换

</script>

</head>

<body>

<!-- HTML页面布局 -->

<ul>

<li>房产</li>

<li>家居</li>

<li>二手房</li>

</ul>

<div>

万购昌平邻铁三居 总价20万买一居<br/>

200万内购五环三居 140万安家东三环<br/>

北京首现零首付楼盘 53万购东5环50平<br/>

京楼盘直降5000 中信府 公园楼王现房

</div>

<div>

40平出租屋大改造 美少女的混搭小窝<br/>

经典清新简欧爱家 90平老房焕发新生<br/>

新中式的酷色温情 66平撞色活泼家居<br/>

瓷砖就像选好老婆 卫生间烟道的设计

</div>

<div>

通州豪华3居260万 二环稀缺2居250w甩<br/>

西3环通透2居290万 130万2居限量抢购<br/>

黄城根小学学区仅260万 121平70万抛!<br/>

独家别墅280万 苏州桥2居优惠价248万

</div>

</body>

</html>


正在回答

3 回答

你的 li 加了左浮动,所以是三个 li 就脱离了文档流,ul就撑不起来了,你可以通过控制台看到 ul 的高度变成0了。

ul 没有高度,下面的 div 就上来了。

你应该给 ul 清除浮动。代码如下:

.clearfix {     
    *zoom: 1;   
}   
.clearfix:before, .clearfix:after {     
    display: table;     
    line-height: 0;     
    content: "";   
}   
.clearfix:after {     
    clear: both;   
}

给 ul 加上 这个class,也就是 

<ul class="clearfix">

这样就可以实现了。望采纳

2 回复 有任何疑惑可以回复我~
#1

qq_慕仰3202168 提问者

.clearfix:before, .clearfix:after是啥意思 还有 display: table; 是什么, 不是只有3种属性值吗,block,inline,none
2019-05-06 回复 有任何疑惑可以回复我~

table 可以有很多值,你可以看一下http://www.w3school.com.cn/cssref/pr_class_display.asp

https://img1.sycdn.imooc.com//5ccfcc920001594216001394.jpg

:before和:after 是伪类,你就哪里需要清除浮动,就把这几个样式粘过去就行了

1 回复 有任何疑惑可以回复我~

li 设置float:left; 已经脱离的文档流,ul,li都是块级元素,设置

ul{

height: 30px;

}

高度与li一样就可以的

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么第一个div中的第一列不换行,而且div不是块级元素吗,不应该自动换行吗,并且我给div设置css样式为什么ul也包裹在里面?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信