我將塊狀元素轉成內(nèi)聯(lián)塊狀元素,然而有些內(nèi)聯(lián)塊狀元素卻不會在同一行。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流動模式下的塊狀元素</title>
<style type="text/css">
#box1{
? ? width:300px;
? ? height:100px;
}
div,h1,p{display:inline-block;
? ? border:1px solid red;
}
</style>
</head>
<body>
? ? <div id="box2">box2</div><!--塊狀元素,由于沒有設置寬度,寬度默認顯示為100%-->?
? ? <h1>標題</h1><!--塊狀元素,由于沒有設置寬度,寬度默認顯示為100%-->?
? ? <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--塊狀元素,由于沒有設置寬度,寬度默認顯示為100%-->?
? ??
? ? <div id="box1">box1</div><!--塊狀元素,由于設置了width:300px,寬度顯示為300px-->
</body>
</html>
2020-03-16
只是因為運行后的頁面太小了放不下,放在在VS code里面寫就是一行的了。
2020-03-04
#box2的寬度問題?
2020-03-03
這是運行結果