我怎樣才能將元素放置在容器外面〜20px顯示？

Question

（jsFiddle example）

我有一個<ul>，其<li> s排列在右邊。我希望他們的位置在<ul>的右側只顯示約20px的元素，並且在懸停時他們會轉到正常位置。這將與容器上的overflow: hidden;相結合，因此元素部分隱藏起始並從側面滑入（使用CSS3過渡）。

在這個jsFiddle example（overflow: visible的說明）中，我能夠將元素滑動到正確的位置，但是如何對齊它們以使它們與20px一起位於它們的容器中以開始？我能做的最好的事情就是保持右對齊，並將它們一直推到容器外。

我打改變元素的寬度，但如果它們包含多個單詞文字環繞和高度的變化（或與overflow: hidden詞語只是當寬度過小消失），這是不能接受的。

如果需要，使用固定寬度<li> s是可以接受的（但不太有趣，也不太可取），但我希望看到其他解決方案。

Answer 1

如果UL本身具有固定寬度，則可以在UL的左側定位LI的（{UL_width} - 20）像素。我可能會做這樣的事情......

<ul> 
    <li><span>Item #1</span></li> 
    <li><span>Item #2</span></li> 
</ul> 
... 

下面的CSS應該給你想要的效果...

ul { width: 200px; } 
ul li { 
    position: relative; 
    height: 15px; 
    overflow: hidden; 
} 
ul li span { 
    position: absolute; 
    top: 0; 
    left: 180px; 
} 

東西沿着這些線路應該做的伎倆。然後，只需進行滾動即可調整您的左側屬性。

新的CSS

ul { width: 200px; } 
ul li { 
    width: 200px; 
    text-indent: 180px; 
    height: 15px; 
    overflow: hidden; 
}