如何防止内联块级div换行？

在CSS中，`display`属性用于设置子元素的显示方式。当我们将`display`属性设置为`inline-block`值时，它会将所有子元素并排显示。此外，它还会自动创建响应式设计，如果空间不足，它会自动换行子元素。

有时，我们需要阻止子元素换行以管理网页的空间。在这种情况下，我们可以使用CSS的`white-space`属性来避免子元素换行。

语法

用户可以按照以下语法，使用CSS的`white-space`属性来防止内联块级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元素不会换行到下一行。

Open Compiler
<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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例2

在下面的示例中，我们添加了多个包含不同数据的表格。第一个表格包含学校数据，第二个表格包含空调数据。

我们将两个表格的display属性都设置为inline-block，以便将它们并排显示在网页上。此外，我们还将`white-space`属性与`container` div元素一起使用。

在输出中，我们可以看到两个表格并排显示，如果我们减小窗口大小，表格也不会换行到下一行，因为我们阻止了两个表格元素换行。

Open Compiler
<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元素。我们使用style对象的`whitespace`属性，使用JavaScript来防止所有内联块级div换行。

Open Compiler
<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元素，我们可以这样做。

更新于：2023年7月26日

4K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告