亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為什么第一個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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號