動態添加的元素不包裝

我需要動態地添加元素到一個頁面，但不幸的是，當我使用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

動態添加的元素不包裝

回答

相關問題