css div不換行顯示的方法：1.為div元素新增「display:inline;」或「display:inline-block;」樣式，將div元素轉為行內元素或行內區塊元素。 2.為div元素添加“float:left;”樣式。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在HTML中，div是塊狀元素，div盒子本身預設樣式屬性是獨佔一行，而解決div獨佔一行方法通常有兩種：
#方法1：使用css display並排顯示
我們加入display:inline或display:inline-block將div元素轉為行內元素或行內塊元素，即可解決實作同儕並排顯示div盒子物件。 行內元素的特點：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
display: inline;
border: 1px solid red;
}
</style>
<title></title>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
<div>第四个div</div>
</body>
</html>
#方法2：使用css float並排顯示
浮動的元素脫離了標準文件流，擺脫區塊級元素和行內元素的限制。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
float: left;
border: 1px solid red;
}
</style>
<title></title>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
<div>第四个div</div>
</body>
</html>
css影片教學）
以上是css div怎麼不換行顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
