Javascript 附加后铬元素卡住？

我在一段看似简单的代码中遇到了一个非常奇怪的问题。下面是一个示例：代码可以通过以下方式复制：

HTML

JS

$（“按钮”）。单击（函数（）{
$（''）.appendTo（'.pagination'）；
});

---

问题：在Chrome中，附加的第二个点直接位于第一个点的顶部，直到您在开发工具中切换任何属性。为什么？对不起，我可能被误解了。如果您尝试这些代码，可能会有所帮助

.pagination .dot {
...
float:left;
}

及

.pagination {
  text-align: center;
  width: 100%;
}
.pagination .dot {
  background: #CCC;
  border-radius: 6px;
  display: inline-block;
  height: 12px;
  width: 12px;
}
.pagination .dot:only-child {
  display: none;
}
.pagination .dot.active {
  background: blue;
}

$('button').click(function() {
  $(' <a href="#" class="dot"></a>').appendTo('.pagination');
});

.pagination .dot {
...
float:left;
}

.pagination {
    display: table;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}