动态添加的元素不包装

我需要动态地添加元素到一个页面，但不幸的是，当我使用jquery .append（）方法执行操作时，元素似乎与页面上已有的其他元素的行为不同，尽管相同的CSS。动态添加的元素不包装

我创建了一个example page来重现问题。

顶部是一个列表（ul与一堆li's）与静态定义的项目。低于hr的是ul，它们的设置方式相同，但li是动态添加的（每600毫秒一个）。由此产生的HTML看起来和我一样（除了id），但显然结果是不同的： * li的空格更短，更严重的是它们没有包含到浏览器的宽度：它们只是简单地导致一个水平滚动被添加。

任何人都可以解释为什么结果不同吗？

最终，我希望新添加的元素可以包装为其容器的大小。在我看来，像这样的CSS应该可以工作..

来源

2010-10-11 gregmac

在每个<li>修复它后添加一个新行。

function addRandom() { 
     $('#cloud2').append('<li><a href="#">test</a></li>\r\n'); 
    }

由于您的li标签被设计为内嵌元素，所以空白区域很重要。

编辑：添加一个空格也工作：

function addRandom() { 
     $('#cloud2').append('<li><a href="#">test</a></li> '); 
    }

来源

2010-10-11 19:55:36 fehays

我不得不给你办到了，现在翘曲，只要给它您喜欢的宽度

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     setInterval(addRandom,600); 
    }); 

    var cnt = 0; 
    function addRandom() { 
     $('#cloud2').append('<li><a href="#">test</a></li>'); 
    } 
    </script> 
    <style type="text/css"> 

div#container{ 
    width:960px; 
    margin:auto; 
    background-color :#fff; 
    height:100%; 
    position:relative; 
    overflow:hidden; 
     -moz-border-radius:5px; 
    clear:both; 
} 
.list { 
     list-style-type:none; 
     margin:0; 
     padding:0; 
    float:left 
    } 
    .cloud{ 
    padding:0;margin:0; 
    } 
    .cloud li { 
     display:inline; 
     margin-right:15px; 
     list-style:none outside none; 
     background:black; 
    float:left; 
    padding:5px; 
    margin:3px; 
     border-radius:5px; 

    } 
.cloud li a{ 
    color:white; 
    font-decoration:none; 
    } 
p{ 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<ul class="cloud" id="cloud1"> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    <li><a href="#">test</a></li> 
    </ul> 
<p> <hr/> </p> 
<ul class="cloud" id="cloud2"> 
</ul> 
</div> 

</body> 
</html>

来源

2010-10-11 19:57:25 tawfekov

动态添加的元素不包装

回答

相关问题