0

スクロールするコメント セクションを作成しています。これは、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);
4

1 に答える 1

12

position: absolute要素の幅がコンテンツに合わせて自動的に縮小されます。

text-align: centerブロック要素の境界内でテキストを中央揃えにします。
ブロック要素がテキストよりも広くない場合、何もしません。

幅を広くする必要があります。

于 2012-05-06T13:51:52.853 に答える