javascript - 追加后 Chrome 元素卡住了？

Question

对于一段看似简单的代码，我遇到了一个非常奇怪的问题。这是一个例子:http://codepen.io/anon/pen/Jgqiu代码可以用这样的东西重现:

HTML

 <nav class="pagination">
     <a href="#" class="dot active"></a>  </nav>

 <button>Add Dot</button>

CSS

.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;
}

JS

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

问题:在 Chrome 中， append 的第二个点直接位于第一个点之上，直到您切换开发工具中的任何属性。为什么？

Answer 1

对不起，我可能被误解了。如果您尝试这些代码，可能会有帮助。

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

和

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