Поместите div поверх <li>и <a>, не перемещая их положение

Question

Я пытаюсь поместить кольцевой кружок (border-radius:85) поверх <li><a></a></li>, чтобы сделать что-то вроде этого:

Теперь создаем его только на одной коробке.Хотя это и работает, хотя когда у меня есть 30 или более блоков, расположенных рядом друг с другом, это заставляет их менять положение и неправильно выравнивать.

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

Если вы удалите круговой элемент div, вы заметите, что прямоугольники выровнены правильно.

Как разместить круговой элемент div на всех полях, не влияя на положение блоков?

Answer 1

Проверьте эту скрипку .

Я добавил position: absolute к круговому делению. Затем я удалил 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 для использования top и left и не margin-top и margin-left.Сделайте это, и вы получите:

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