如何防止inline-block div換行？-css教學-PHP中文網

文法

範例 3

首頁

web前端

css教學

如何防止inline-block div換行？

PHPz

Sep 03, 2023 pm 08:29 PM

如何防止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 元素沒有換行，也沒有進入下一行。

<html>
<head>
   <style>
      .container {
         white-space: nowrap;
      }
      .inline-block-div {
         display: inline-block;
         width: 200px;
         height: 100px;
         border: 1px solid black;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "container">
      <div class = "inline-block-div"> Div 1 </div>
      <div class = "inline-block-div"> Div 2 </div>
      <div class = "inline-block-div"> Div 3 </div>
   </div>
</body>
</html>

登入後複製

範例 2

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

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

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

<html>
<head>
   <style>
      .container {white-space: nowrap;}
      .table {white-space: nowrap; display: inline-block; vertical-align: top; margin: 10px; border: 1px solid black;}
      th, td {padding: 10px 40px; border: 1px solid black;}
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "container">
      <table class = "container table">
         <tr><th> school Name </th> <th> Total Students </th> </tr>
         <tr><td> ABC School </td> <td> 100 </td></tr>
      </table>
      <table class = "container table">
         <tr><th> AC brand </th> <th> color </th><th> Price </th></tr>
         <tr><td> LG </td> <td> White </td> <td> 10000 </td> </tr>
      </table>
   </div>
</body>
</html>

登入後複製

範例 3

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

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

<html>
<head>
   <style>
      .child {width: 300px; background-color: blue; height: 200px; display: inline-block; margin: 10px; color: white; font-size: 30px;}
   </style>
</head>
<body>
   <h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
   <div class = "parent">
      <div class = "child"> First </div>
      <div class = "child"> Second </div>
      <div class = "child"> Third </div>
      <div class = "child"> Fourth </div>
   </div>
   <script>
      let divs = document.querySelectorAll('div');
      let divsArray = Array.from(divs);
      // add white-space: nowrap to all div
      divsArray.forEach(div => {
         div.style.whiteSpace = 'nowrap';
      });
   </script>
</body>
</html>

登入後複製

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn