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中，附加的第二个点直接位于第一个点的顶部，直到您切换开发工具中的任何属性。为什么呢？

Answer 1

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

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

和

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

Chrome Element追加后被困？

1 个答案: