為什么第一個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>
2019-05-06
你的 li 加了左浮動,所以是三個 li 就脫離了文檔流,ul就撐不起來了,你可以通過控制臺看到 ul 的高度變成0了。
ul 沒有高度,下面的 div 就上來了。
你應該給 ul 清除浮動。代碼如下:
給 ul 加上 這個class,也就是?
這樣就可以實現了。望采納
2019-05-06
table 可以有很多值,你可以看一下http://www.w3school.com.cn/cssref/pr_class_display.asp,
:before和:after 是偽類,你就哪里需要清除浮動,就把這幾個樣式粘過去就行了
2019-05-06
li 設置float:left; 已經脫離的文檔流,ul,li都是塊級元素,設置
ul{
height: 30px;
}
高度與li一樣就可以的