我正在制作一个滚动评论部分,它的工作原理是让php回应的几个元素的顶级属性用javascript动画。一切似乎工作正常,除非我将其位置设置为绝对并同时使用javascript,这导致text-align:center仅在文本中有多行时才起作用。这是我的代码:
HTML(大致如此,通过PHP回应,也为内联样式道歉)
<div id="element0" style="position:absolute;text-align:center;">Hello world!</div>
<div id="element1" style="position:absolute;text-align:center;">Hello world!</div>
<div id="element2" style="position:absolute;text-align:center;">Hello world!</div>
<div id="element3" style="position:absolute;text-align:center;">Hello world!</div>
的Javascript
var offset = 0;
var i = 0;
for(i = 0; i < 3; i++) {
obj = document.getElementById("element" + i);
obj.style.top = offset + "px";
offset += obj.clientHeight;
}
function moveComments() {
var i1 = 0;
for(i1 = 0; i1 < 3; i1++) {
obj = document.getElementById("element" + i1);
obj.style.top = parseInt(obj.style.top) - 1 + 'px';
if(parseInt(obj.style.top) <= -offset)
obj.style.top = offset + 100 + "px";
}
}
setInterval(moveComments, 10);
答案 0 :(得分:12)
position: absolute
会导致元素的宽度自动缩小以适合其内容。
text-align: center
将文本置于块元素范围内
如果块元素不比文本宽,它将不会做任何事情。
你需要给它一个更大的宽度。