我需要动态地向页面添加元素,但不幸的是,当我使用jquery .append()方法时,元素似乎与页面上已有的其他元素的行为不同,尽管CSS相同。
我创建了一个example page来重现问题。
顶部的是一个带有静态定义项的列表(ul
,带有一堆li
)。 hr下面的ul
设置方式相同,但动态添加li
(每600毫秒一个)。生成的HTML看起来与我相同(除了id),但显然结果是不同的:
* li
的间距较短
*更严重的是,它们没有包裹到浏览器的宽度:它们只是导致添加水平滚动。
有谁可以解释为什么结果不同?
最终,我希望新添加的元素包装到容器的大小。在我看来这样的CSS应该可以工作..
答案 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>