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 添加到你的 li 中

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