Javascript 创建水平滚动div的循环

我使用jquery以便动态创建一系列可以水平滚动的div，问题是div不会水平滚动，而是向下滚动

下面是我的Jquery/html代码

<div id="routeContainer">
  <script type="text/javascript">

      var margin = 0;
      for (var i = 0; i < 5; i++) {
         $("#routeContainer").append("<div style = 'margin-left: " + margin + "px;' class = 'test'>hello world</div>");
         margin += 50;
      };
  </script>
</div>

这就是我改编代码的JSFIDLE

---

为什么它不工作？

您希望将#routeContainer的高度和宽度固定为一些固定值，而不是100%，否则它将扩展以适应其中的内容，而不是滚动

您还需要从.test类中删除float:left，以便div并排放置，而不是浮在彼此下面

这可能就是你想要的：

---

（旁白：我不知道你想用增加的边距做什么。你也提到了多个滚动div，但是你的代码创建了一个滚动div并用多个“hello world”div填充。你应该可以在它下面添加更多。）

如果你想使它水平，那么在它里面有一个表，就像这样

 <div id="routeContainer">
       <table>
          <tr id="routeContainerTR">

          </tr>
       </table>    
 </div>

然后在javascript函数中添加

<script type="text/javascript">

  var margin = 0;

  for (var i = 0; i < 5; i++) {

  $("#routeContainerTR").append("<td><div style = 'margin-left: " + margin +

   "px;' class = 'test'>hello world</div></td>");

  margin += 50;

  }; 

var保证金=0；
对于（变量i=0；i<5；i++）{
$（“#routeContainerTR”）.append（“hello world”）；
保证金+=50；
}; 

 <div id="routeContainer">
       <table>
          <tr id="routeContainerTR">

          </tr>
       </table>    
 </div>

<script type="text/javascript">

  var margin = 0;

  for (var i = 0; i < 5; i++) {

  $("#routeContainerTR").append("<td><div style = 'margin-left: " + margin +

   "px;' class = 'test'>hello world</div></td>");

  margin += 50;

  };