javascript - Chrome Element Stuck After Append? -


i have run across strange issue seemingly simple piece of code. here example: http://codepen.io/anon/pen/jgqiu code being reproducible this:

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'); }); 

problem: in chrome, 2nd dot appended stays directly on top of first, until toggle of properties in dev tools. why?

sorry, may misunderstood. if try these codes may helpful.

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

and

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

Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -