CSS - 内联块不直接并排

Question

我创建了一个列表和一个div，两者都显示：inline-block;

然而，结果看起来像附图。右侧元素的位置比左侧低10px。但为什么呢？

代码是：

#menu-social {
    width: 40%;
    padding-top: 4px;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.frlk-top-bar-right {
    width: 60%;
    text-align: right;
    display: inline-block;
    font-size: 0;
}

有人知道吗？

感谢。

Answer 1

添加vertical-align

vertical-align: top;

更多信息：

https://developer.mozilla.org/es/docs/Web/CSS/vertical-align