javascript - 单击一个 div 会更改附近 div 的位置

Question

我正在尝试做一个待办事项应用程序。我有可以动态添加的称为文件夹的东西，我们可以在每个文件夹中添加待办事项。所有列表项都被赋予了 contenteditable 属性。当我尝试编辑其中一个列表项时，它下面的 div 的位置发生了变化。我不知道是什么原因造成的。我已经研究了几个小时了，还没有找到任何细节。

Image showing the folders getting realigned

var createFolder = function() {
  var folder = document.createElement("div");
  folder.classList.add("folder");
  folder.innerHTML = '<span id="deleteFolder" onclick="deleteFolder(this)"><i class="fa fa-trash-o"></i></span> ' +
    '<span contenteditable="true" onfocusout="checkIfEmpty(this,\'New Folder\')">New Folder</span>' +
    ' <span id="newItem" class="addItem" onclick="addItem(this)"><i class="fa fa-plus"></i></span>' +
    '<ul class="list">' +
    '<li contenteditable="true" onfocusout="checkIfEmpty(this)" class="bigandspacy">New Item</li>' +
    '</ul>';
  document.getElementById("container").appendChild(folder);
}

var checkIfEmpty = function(e, originalContent) {
  if (e.textContent === "") {
    e.textContent = originalContent || "New Item";
  }
}

var deleteFolder = function(e) {
  console.log(e.parentNode);
  document.getElementById("container").removeChild(e.parentNode);
}

var addItem = function(e) {
  var elem = document.createElement("li");
  elem.innerText = "New Item";
  elem.setAttribute("contenteditable", "true")
  elem.classList.add("bigandspacy");
  e.parentNode.children[3].appendChild(elem);
}

document.getElementById("newFolder").addEventListener('click', createFolder, false);

body {
  background: #E1E1E4;
}
.container {
  position: fixed;
}
.folder {
  display: inline-block;
  position: relative;
  background: #2A2A33;
  width: 40vh;
  margin: 10px;
  border-radius: 8px;
  color: white;
  font-size: 1em;
  float: left;
  min-height: 50px;
}
.folder:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 30px 30px 0;
  border-style: solid;
  border-color: #666666 #E1E1E4;
}
.folder .fa-trash-o {
  padding: 5px;
  cursor: pointer;
}
.addItem {
  float: right;
  margin-right: 18%;
  margin-top: 2%;
}
li {
  list-style: none;
}
.bigandspacy {
  font-size: 1.2em;
  padding: 5px;
  width: 80%;
  margin-top: 5px;
}
.bigandspacy:focus {
  border: 1px solid white;
}
.bigandspacy:hover {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<button id="newFolder"><i class="fa fa-plus"></i>
</button>
<div id="container"></div>

提前致谢。

Answer 1

给输入一个透明的边框，这样它就不会改变焦点的大小:

.bigandspacy{
  font-size: 1.2em;
  padding: 5px;
  width: 80%;
  margin-top: 5px; 
  border: 1px solid transparent;
}

(然后只需更新焦点上的 border-color)

更新 fiddle :https://jsfiddle.net/axs5ec89/2/