Search code examples
htmlcsshtml-listscenter

Slipping out of the list item to the right without centering

I need the item of the list isn't centered but moved to the right.

_http://jsfiddle.net/dHY7N/

How it looks now ( normal state / hover state):

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

============================================
I need:

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

without js, if possible.

Solution

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

    Hope this helps.. With what you are doing, Java script would probably be best. But if you want to do it with css, the alternate is above.

    Width of .item + margin & padding & borders of li * amount 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; }