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