如何防止inline-block div換行？

在CSS中，‘display’屬性用來設定子元素的顯示。當我們為 display 屬性設定「inline-block」值時，它會並排顯示所有子元素。此外，它會自動建立響應式設計，就好像它沒有找到足夠的空間一樣，它會自動包裹子元素。

有時，我們需要停止包裝子元素來管理網頁空間。在這種情況下，我們可以管理 CSS 的「white-space」屬性，以避免包裹子元素。

文法

使用者可以遵循以下語法，使用「white-space」CSS 屬性來防止內聯區塊 div 換行。

CSS_selector {
   white-space: nowrap;
}

在上面的語法中，CSS_selector是我們設定「inline-block」顯示的所有子元素的父元素。

讓我們透過下面的範例來了解如何防止內聯塊元素換行。

範例 1

在下面的範例中，我們建立了包含「container」類別名稱的父 div 元素。之後，我們在父容器中新增了三個子元素，每個子元素都包含「inline-block-div」類別名稱。

在 CSS 中，我們對父容器使用「white-space: no-wrap」CSS 屬性，對所有子元素使用「display: inline-block」。此外，我們也使用了一些其他 CSS 屬性來設定 div 元素的樣式。

在輸出中，使用者可以嘗試減少瀏覽器視窗的大小，並觀察內聯塊 div 元素沒有換行，也沒有進入下一行。

   



   
 Preventing the  inline-block divs  from wrapping 
   

      
 Div 1 
      
 Div 2 
      
 Div 3 
   

範例 2

在下面的範例中，我們新增了多個包含不同資料的表格。第一個表格包含學校數據，第二個表格包含 AC 資料。

我們將兩個表的顯示設定為等於內聯區塊，以便在網頁上並排顯示它們。此外，我們將「white-space」屬性與「container」div 元素一起使用。

在輸出中，我們可以並排觀察兩個表格，如果我們減少視窗大小，表格不會進入下一行，因為我們防止兩個表格元素換行。

   



   
 Preventing the  inline-block divs  from wrapping 
   

      

         
 school Name 
 
 Total Students 
 
         
 ABC School 
 
 100 
      
      

         
 AC brand 
 
 color 
 Price 
         
 LG 
 
 White 
 
 10000 
 
      
   

範例 3

在下面的範例中，我們示範如何防止內聯區塊 div 元素有條件地換行。如果我們需要防止內聯區塊 div 元素在任何特定條件下換行，我們可以使用 JavaScript。

在 JavaScript 中，我們存取所有 div 元素並使用 forEach() 方法迭代所有 div 元素。我們使用樣式物件的「whitespace」屬性來防止所有內聯區塊 div 使用 JavaScript 換行。

   



   
 Preventing the  inline-block divs  from wrapping 
   

      
 First 
      
 Second 
      
 Third 
      
 Fourth 
   
   

使用者學會如何防止內聯塊 div 元素換行。我們使用「white-space」CSS 屬性來防止 div 元素換行。然而，阻止內聯區塊 div 元素換行並不是一個好的做法，因為它會消除網頁的回應能力，但在某些特定情況下，如果我們不想垂直擴展 div 元素，我們可以阻止這種情況。

以上是如何防止inline-block div換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！