CSS display inline-block inline 顶到下面找不出原因

[cc7756789]

不管是 inline-block ，还是 inline ，都会往下飘～，只有设置 float 才能正常，望赐教原因


```html
<section class="how_width" id="cat-index">
<div class="cat-one-block cat-longer">
<dl>
<dt class="cat-i-title">
<i class="vertically-index-line c-i-t-0"></i>
<div class="cat-i-title-name">按类型</div>
</dt>
<dd></dd>
</dl>
</div>

<div class="cat-one-block cat-longer">
<dl>
<dt class="cat-i-title">
<i class="vertically-index-line c-i-t-0"></i>
</dt>
<dd></dd>
</dl>
</div>

<div class="cat-one-block cat-shorter">
<dl>
<dt class="cat-i-title">
<i class="vertically-index-line c-i-t-0"></i>
</dt>
<dd></dd>
</dl>
</div>

<div class="cat-one-block cat-shorter">
<dl>
<dt class="cat-i-title">
<i class="vertically-index-line c-i-t-0"></i>
</dt>
<dd></dd>
</dl>
</div>
</section>
```

```css
#cat-index {
height: 120px;
}

#cat-index::after {
content: "";
display: block;
clear: both;
}

.cat-one-block {
margin-right: 20px;
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #CAE1FF;
}


.cat-longer {
width: 28%;
height: 100%;
}

.cat-shorter {
width: 17%;
height: 100%;
}

.cat-i-title {
width: 100%;
height: 40px;
background-color: #DFDFDF;
display: inline-block;
}

.vertically-index-line {
width: 4px;
height: 100%;
display: inline-block;
}


.cat-i-title-name {
width: 60%;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 20px;
}


```

[IamJ]

vertical-align

[ceoimon]

.vertically-index-line, .cat-i-title-name {
vertical-align: middle;
}

因为默认的 inline 元素按照 baseline 水平排列。