单击时如何防止 HTML 按钮移动

Question

我正在尝试制作一个按钮，单击该按钮会创建一堆 div 元素，每个元素都包含单词“hello”。我的代码在这里：

var start = function() {
  for (var i = 0; i < 16; i++) {
    var x = document.createElement('div');
    x.setAttribute('class', 'e');
    var t = 40;
    x.style.marginLeft = t + "px";
    var p = document.createElement('p');
    p.innerHTML = "hello";
    x.appendChild(p);
    document.body.append(x);
  }
};

.e {
  background-color: red;
  width: 5%;
  float: left;
  margin-top: 90px;
}

;
#start_button {
  float: left;
}

<button type="button" id="start_button" onclick="start()">Start</button>

目前，当点击按钮时，出现div，但是按钮向右移动，我找不到办法让它保持在左边。我尝试将 margin-left 和 margin-right 设置为固定值，但它并没有改变。我该怎么办？提前致谢。

Answer 1

删除类选择器的 css 之后的分号，其中

}

在 id 选择器之前结束。那里的分号在语法上是错误的并且会产生异常行为。

Answer 2

将按钮的 css 设置为：

    position: absolute;
    left: 30px;
    top: 20px;

不管怎样，它都会留在那个地方