javascript - HTML CSS滚动文本一一

我如何能一一滚动文本而无需跳出框框，使其在chrome和firefox中工作。

<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
    <marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();"
 OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">

    <ul id="list" >

<li id="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
<li id="2">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>

</ul>
    </marquee>
    </div>

最佳答案

如果我正确地回答了您的问题，则您尝试一次移动一个<li>，因此您已给包装器指定了80px的特定高度，只需将margin-bottom:80px添加到每个<li>元素中即可。

<div style="position:absolute; top:0px; left:0px; right:0px; height:80px; overflow:hidden; display:block; border:solid 1px gray; padding:2px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;">
  <marquee behavior="scroll" direction="up" scrollamount="5" style="width:100%; height:100%; vertical-align:middle; cursor:pointer;" onMouseOver="this.setAttribute('scrollamount', 0, 0);this.stop();" OnMouseOut="this.setAttribute('scrollamount', 2, 0);this.start();">

    <ul id="list">

      <li id="1" style="margin-bottom:80px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaa.</li>
      <li id="2" style="margin-bottom:80px;">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.</li>

    </ul>
  </marquee>
</div>

关于javascript - HTML CSS滚动文本一一，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53961818/