极客笔记CSS 如何防止inline-block divs换行
在CSS中，’display’属性用于设置子元素的显示方式。当我们将’display’属性设置为’inline-block’时，它会将所有子元素显示在一行上。此外，它会自动创建响应式设计，如果没有足够的空间，它会自动将子元素换行。
有时，我们需要阻止子元素换行以管理网页空间。在这种情况下，我们可以通过管理CSS的’white-space’属性来避免子元素换行。
语法
用户可以通过以下语法使用’white-space’ CSS属性来防止inline-block divs换行。
CSS_selector {
white-space: nowrap;
}
在上述语法中，CSS_selector是我们为其设置“inline-block”显示的所有子元素的父元素。
让我们通过下面的示例来理解如何防止inline-block元素换行。
示例1
在下面的示例中，我们创建了一个包含“container”类名的父div元素。然后，我们在父容器内添加了三个子元素，每个子元素都包含“inline-block-div”类名。
在CSS中，我们为父容器使用了“white-space: no-wrap” CSS属性，并为所有子元素使用了“display: inline-block”。此外，我们还使用了一些其他CSS属性来为div元素添加样式。
在输出中，用户可以尝试缩小浏览器窗口的大小，并观察到inline-block 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
在下面的示例中，我们添加了多个包含不同数据的表格。第一个表格包含学校数据，第二个表格包含空调数据。
我们将两个表格的显示设置为内联块，以便在网页中并排显示它们。此外，我们使用了’容器’ div 元素的’white-space’属性。
在输出中，我们可以观察到两个表格并列显示，如果我们减小窗口大小，表格不会换行，因为我们阻止了两个表格元素的换行。
<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’属性来防止所有内联块级div换行。
<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>
用户学会了如何防止inline-block div元素换行。我们使用了CSS属性’white-space’来防止div元素换行。然而，防止inline-block div元素换行并非良好的做法，因为它会破坏网页的响应性。但在某些特定情况下，如果不希望div元素垂直扩展，我们可以进行防止换行。