如何防止inline-block div换行？-猿码集

1. inline-block元素概述

在 CSS 中，display: inline-block 的元素是指元素之间可以水平排列，但又可以有各自的高度。inline-block 元素一般用来实现文本环绕效果，也可以用来实现跟随效果等，同时也给布局带来了很多便利，但这种排列方式也会带来一些布局问题。

2. 问题描述

当我们使用 display: inline-block 属性设置元素的样式时，我们会发现当元素的宽度太大，它们会自动换行，如下所示：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
}

3. inline-block元素换行原因

inline-block 元素因为会依照文字的排列方式排列元素，所以在排列过程中会产生空白及换行符的问题。inline-block 元素排列时，会把标签之间的空白符看作一个空格，这会在页面里产生一些不可见的空白符。这些空白符会导致 inline-block 元素之间间距的出现。

3.1 空格符问题

以下代码中，三个 div 元素内部有空格符，导致它们之间出现了 4px （空格符的宽度）的间距：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div>

3.2 换行符问题

以下代码中，三个 div 元素默认在页面中出现了一个换行符，导致它们之间出现了一行的间距：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
<div class="box"></div><div class="box"></div><div class="box"></div>

4. 解决方法

有多种方式可以解决 inline-block 元素换行问题。

4.1 去除空格符

我们可以把元素之间的空格符去掉，代码如下：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
<div class="box"></div><div class="box"></div><div class="box"></div>

4.2 字体大小为0

如果直接把空格符去掉可能会导致代码不易阅读及管理，其实我们也可以设置父级元素的字体大小为0，避免了空格符对排列的影响，同时代码也更加清晰，代码如下：

.wrap {
  font-size: 0;
}
.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

4.3 margin-left负值

我们还可以把 div 元素的 margin-left 值设为负值，来抵消它们之间的空隙，代码如下：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-left: -4px;
  background-color: #ccc;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

4.4 font-size与letter-spacing结合

使用 letter-spacing: -4px 和 font-size: 0 结合使用也可以起到把空隙去除的作用，代码如下：

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  letter-spacing: -4px;
}
.wrap {
  font-size: 0;
}
<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

5. 总结

inline-block 元素可以方便地完成排版工作，但它由于依赖于文字排版的方式来排列元素，它与浏览器默认处理空白符和换行符的方式会产生一些问题，对于这些问题，我们可以使用去掉空格，设置字体大小为0，设置 margin-left 为负值，字体大小与 letter-spacing 结合等方式来避免或解决问题。

如何防止inline-block div换行？