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