Why html constructed by jquery show different from the original html? -


i have html file, this:

<!doctype html> <html> <head>     <script src='jquery.js'></script>     <style>     .some_list li {         display: inline-block;     }     </style>     <script>     $(function() {         $('#wrapper').append("<ul class='some_list'><li>a</li><li>b</li></ul>")     });     </script> </head> <body>     <div id='wrapper'>         <ul class='some_list'>             <li>a</li>             <li>b</li>                     </ul>     </div> </body> 

the result this:

a b ab 

the 2 ul take same css effect, show differently.

why happened?

display: inline-block; has small bug, can not let 2 tags .li without space otherwise join.

put space between li tags:

$(function() {         $('#wrapper').append("<ul class='some_list'><li>a</li> <li>b</li><li>c</li></ul>")     }); 

here can see better example: jsfiddle.net/ng67otm6


Comments

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -