使用垂直文本定位项目 - 悬停/绝对定位

Question

您好我创建了一个包含垂直列表元素的列表，我希望它们在悬停时可以缩放和重叠列表中的其他项目而不需要移动其他项目。我已经取得了一些进展，请参阅

http://jsfiddle.net/saqibmbhatti/P74GG/6/

<ul>

  <li>
    <div class="placeholder">
      <span class="rotated-text">Item - 1</span>
    </div>
  </li>

  <li>
    <div class="placeholder">
      <span class="rotated-text">Item - 2</span>
    </div>
  </li>

  <li>
    <div class="placeholder">
      <span class="rotated-text">Item - 3 is long</span>
    </div>
  </li>

  <li>
    <div class="placeholder">
      <span class="rotated-text">Item - 4 is longer</span>
    </div>
  </li>

</ul>

当其中一件物品悬停时，我仍然无法弄清楚为什么这些物品会向下跳。 任何帮助将不胜感激。

此致 S上。

Answer 1

将vertical-align: top添加到您的李

ul li {
    display: inline-block;
    width: 35px;
    height:150px;
    line-height:35px;
    font-size: 12px;
    font-weight: bold;
    font-family: arial;
    cursor: pointer;
    position: relative;
    vertical-align: top;
}

jsFiddle