html - 垂直文本项目的定位 - 悬停/绝对定位

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