将div放在<li>和<a> without moving their position</a> </li>之上

Question

我正在尝试在(border-radius:85)之上放置一个圆圈div <li><a></a></li>来制作这样的内容：

现在只在一个盒子上使用它有点工作，虽然当我有30个或更多的盒子彼此相邻时，它会强制它们改变位置而不能正确对齐。

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

如果删除圆形div，您会注意到这些框已正确对齐。

如何在不影响方框位置的情况下将圆形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

这样的东西？

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

Answer 4

我将div css更改为使用.kshort，从overflow:hidden和.kshort删除了ul li并更改了.kshort div的定位使用top和left而非margin-top和margin-left。这样做，你得到：

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