html - 向右滑出列表项而不居中

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 的宽度 + li 的边距 & 内边距 & 边框 * lis 的数量 / 2 = margin-left: - 你的边距；

.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; }