1

リストの項目を中央に配置するのではなく、右に移動する必要があります。

_http://jsfiddle.net/dHY7N/

現在の外観 (通常状態 / ホバー状態):

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

===========================================
必要なもの:

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

可能であれば、js なしで。

4

1 に答える 1

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; }
于 2012-12-04T22:37:51.673 に答える