地方格不動，它們的位置

Question

我試圖把一個circlular DIV (border-radius:85)在<li><a></a></li>的頂部，使這樣的事情：

現在使它只盡管當我有30個或更多的盒子放在一起時，它會強制它們改變位置並且不能正確對齊。

的jsfiddle：http://jsfiddle.net/ZtbTU/

如果去掉圓格，你會發現，這些箱子正確對齊。

如何在不影響盒子位置的情況下將圓形div放置在所有盒子上？

Answer 1

退房this fiddle。

我將position: absolute添加到圓形div。然後我刪除了overflow: hidden並添加了一些top和left定義來定位div。

HTML

<ul> 
    <li id="item-1"> 
     <a href="#" ></a><div class="kshort">1</div> 
    </li> 
    <li id="item-2"> 
     <a href="#" ></a> 
    </li> 
</ul> 

CSS

ul li{ 
    float:left; 
    margin:12px; 
    position:relative} 

ul li a{ 
    background:#ccc; 
    background-repeat:no-repeat; 
    display:block; 
    height:48px; 
    width:48px} 

div { 
    width:15px; 
    height:15px; 
    border:1px solid #333; 
    background:#333; 
    color:white; 
    border-radius:10px; 
    position:absolute; 
    line-height:14px; 
    text-align:center; 
    overflow:hidden; 
    top: 35px; 
    left: 40px; 
} 

Answer 2

在這裏你去 - http://jsfiddle.net/kartikrao/tZmnz/4/

編輯：小提琴更新放置在div底部

Answer 3

我改變div CSS使用.kshort，從.kshort和ul li去除overflow:hidden，改變了.kshort div的定位使用top和left一個d不是margin-top和margin-left。做到這一點，你會得到：

http://jsfiddle.net/fFPbx/1/

Answer 4

像這樣的事情？

http://jsfiddle.net/LFPgf/11/