当inline-block遇上overflow

发表于 | 更新于 | 分类于

1. inline-block的现象

在使用inline-block的时候，会发现有的时候inline-block元素会出现不能对齐的现象。

比如当使用如下结构的html时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>block</title>
  <style>
    .container {
      display: block;
      position: relative;
      top:32px;
      left:32px;
      width: 600px;
      height: 600px;
      background-color: transparent;
      padding: 0;
      line-height: 2;

      /*text-size-adjust: 100%;*/
    }
    .item {
      padding: 1rem;
      display: inline-block;
      position: relative;
      font-family: "Microsoft YaHei UI", "Helvetica Neue", sans-serif;
      font-size: 16px;
      line-height: 1;
      overflow: hidden;
      background-color: blue;
    }
    .item2 {
      padding: 1rem;
      display: inline-block;
      position: relative;
      font-family: "Microsoft YaHei UI", "Helvetica Neue", sans-serif;
      font-size: 16px;
      line-height: 1;
      background-color: blue;
    }
  </style>
</head>
<body>
<div class="container" tabindex="-1">
    <div class="item">111111</div>
    <div class="item">111111</div>
    <div class="item2">111111</div>
    <div class="item2">111111</div>
</div>
<script>
</script>
</body>
</html>

2. 原因和解决方法

当左侧item设置了overflow为hidden的时候，与右边的item2不能对齐了。

导致这一情况的原因是css规范中，当inline-block的overflow设置为hidden后，其vertical-align的baseline会设置为overflow为hidden的底端，也就是说，此时容器的baseline到了item的底端，所以导致不能对齐。

解决方式很简单，将item1和item2的vertical-align都设置为middle或者bottom就可以了。

详细情况参见文章overflow:hidden影响inline-block元素周围元素下移

还有css规范