在網頁設計中，有一個場景就是需要將一系列的元素橫向排列，而不是垂直排列。例如，在製作表格或圖片展示時往往需要將元素橫向排列，而這時候我們就需要使用 div css 不換行顯示。
一、使用 display:inline-block
我們可以使用CSS中的 display:inline-block 屬性來實現 div 元素的橫向排列。將 div 元素的 display 屬性設為 inline-block 後，div 元素就可以和文字一樣，按照從左到右的順序排列了。不過，要注意的是，此方法需要在父元素上統一設定 font-size:0;，否則會在 div 元素中出現空隙。
程式碼範例：
<style>
.parent {
font-size: 0; /* 必须设置为0，否则会出现空隙 */
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>二、使用 float:left
#另一種實作 div css 不換行顯示的方法是使用 float:left 屬性。將 div 元素的 float 屬性設為 left 後，div 元素就可以橫向排列。不過，要注意的是，此方法需要在父元素上清除浮動，否則會出現父元素高度塌陷的問題。
程式碼範例：
<style>
.parent {
overflow: hidden; /* 清除浮动 */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>三、使用 display:flex
#在 CSS3 中，新增了 display:flex 屬性，可以輕鬆實現 div 元素的橫向排列。將父元素的 display 屬性設為 flex，子元素可以自動排列，並且可以調整子元素中的排列順序，靈活性非常高。
程式碼範例：
<style>
.parent {
display: flex;
}
.child {
width: 100px;
height: 100px;
background-color: red;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>四、總結
綜上所述，我們可以透過display:inline-block、float:left、display:flex 等CSS 屬性實現div css 不換行顯示。其中，display:inline-block 常被用來相容於低版瀏覽器，而 float:left 在相容性方面表現很穩定。而 display:flex 則是最受歡迎的一種方法，在應對各種複雜排版時能夠發揮出非常靈活的作用。
以上是css怎麼讓div不換行顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
