html - 显示内联 block 悬停

Question

我正在使用 display: inline-block; 来让一些 div 彼此相邻。我不知道为什么，但是悬停时 div 会向上移动。我认为它向上移动的数量与其非悬停形式的元素(.title 类元素)的填充有关。这很奇怪，我不明白为什么会这样，因为所有值都在悬停表单中重置。

JSFiddle

请注意，我使用的是 Sass，因此 css 可能看起来有点奇怪

Answer 1

.option {
  vertical-align:bottom;
}

因为您将元素声明为内联，所以它们遵循与页面所有流动内容相同的垂直对齐规则——有点居中。强制到整条线的固定位置，就解决了。