滑出列表項右側沒有居中

Question

我需要列表中的項不居中但移動到右側。

_http：//jsfiddle.net/dHY7N/

現在它的外觀（正常狀態/懸停狀態）：

_http：//habrastorage.org/storage2/ea6/221/1da/ ea62211dab05dd6e02ce0dba6e11d68c.png

=========================================== =
我需要：

_http：//habrastorage.org/storage2/c3b/3da/659/c3b3da6590e282aca6fdf697eea1059b.png

沒有js，如果可能的話。

Answer 1

http://jsfiddle.net/dHY7N/1/

希望這有助於。隨着你在做什麼，Java腳本的可能會是最好的。但是如果你想用CSS來做，替代品就在上面。

寬度.item + margin &填充& li的邊界*數量of lis/2 = margin-left：-Your margin;

.wrapper { width:100%; height:50px; border: 1px dashed blue; } 

.wrapper ul { height:100%; position:relative; margin-left:-56px; /*your margin*/ left:50%; padding: 0; display:block; list-style: none; overflow:hidden; } 

.wrapper ul li { position: relative; float: left; max-width: 50px; overflow: hidden; height:100%; margin: 0 3px; border: 1px dashed red; } 

.wrapper ul li:hover { cursor: pointer; max-width:100%; } 



.item { height:100%; width:50px; background-color: blue; position: relative; float: left; } 

.item-name { margin-left: 65px; width: auto; color: green; overflow: visible; z-index: 2; font-size: 20px; }