ansaurus

Question

Answer 1

+1 A:

adding a new line after each <li> fixes it.

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

Since your li tags are styled as inline elements, the white-space matters.

EDIT: adding a space works too:

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

fehays 2010-10-11 19:55:36

Answer 2

A:

I had fix it for you its now warping , just give it your prefered width

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

tawfekov 2010-10-11 19:57:25

ansaurus

tags:

views:

answers:

Dynamically-added elements not wrapping

related questions