动态添加的元素不包装

时间:2010-10-11 19:45:21

标签: jquery css dhtml

我需要动态地向页面添加元素,但不幸的是,当我使用jquery .append()方法时,元素似乎与页面上已有的其他元素的行为不同,尽管CSS相同。

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

顶部的

是一个带有静态定义项的列表(ul,带有一堆li)。 hr下面的ul设置方式相同,但动态添加li(每600毫秒一个)。生成的HTML看起来与我相同(除了id),但显然结果是不同的:  * li的间距较短  *更严重的是,它们没有包裹到浏览器的宽度:它们只是导致添加水平滚动。

有谁可以解释为什么结果不同?

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

2 个答案:

答案 0 :(得分:1)

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

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

由于你的li标签被设计为内联元素,因此白色空间非常重要。

编辑:添加空间也有效:

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

答案 1 :(得分:0)

我已经为你解决了它现在变形,只是给它你喜欢的宽度

 <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>