定位與垂直文本的項目 - 懸停/絕對定位

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