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
Post a Comment