HTML文字横向滚动

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div>
<marquee width="100%" height="64px" direction="left" scrollamount="3"
          onmouseover="this.stop()" onmouseout="this.start()">
         <span style="color: #aaffaa;line-height: 50px;font-size: 50px;"> test1</span>&nbsp;&nbsp;&nbsp;
       <span style="color: #aaffaa;line-height: 50px;font-size: 50px;"> test2</span>&nbsp;&nbsp;&nbsp;
        <span style="color: #aaffaa;line-height: 50px;font-size: 50px;"> test3</span>&nbsp;&nbsp;&nbsp;
        <span style="color: #aaffaa;line-height: 50px;font-size: 50px;"> test4</span>&nbsp;&nbsp;&nbsp;
    </marquee>
      </div>
</body>
</html>