html - 文本和按钮之间的间距相等

Question

<分区>

Answer 1

你可以使用 <table>而不是 <div>并附加 p在左栏中，按钮在右栏中，因此按钮始终位于彼此之上:

function todo() {
  var ParentDiv = document.getElementById('mytable');
  var newRow = document.createElement('tr');
  var leftCell = document.createElement('td');
  var rightCell = document.createElement('td');
  var newPara = document.createElement('p');
  var value = document.getElementById('input-box').value;
  var newText = document.createTextNode(value);
  var del = document.createElement('input');
  randomId = Math.random();
  // newPara.setAttribute("id",randomId);
  newPara.setAttribute("class", "para");
  del.setAttribute("type", "button");
  del.setAttribute("value", "delete");
  del.setAttribute("onclick", "delt(this)");
  del.setAttribute("class", "delbtn");
  newPara.appendChild(newText);
  rightCell.appendChild(del);
  leftCell.appendChild(newPara);
  newRow.appendChild(leftCell);
  newRow.appendChild(rightCell);
  ParentDiv.appendChild(newRow);
}

// function delt(me) {
//     var parentId = me.parentElement.getAttribute("id");
//     //var x = me.parentElement.nodeName;
//     //console.log(parentId);  
//     document.getElementById(parentId).remove();
// }
function delt(me) {
  var parent = me.parentNode;
  var grandParent = parent.parentNode;
  grandParent.removeChild(parent);
  //console.log(grandParent);

}

//delt();

body {
  margin-left: 25rem;
  margin-top: 5rem;
  margin-right: auto;
}

h1 {
  margin-left: 4rem;
  margin-right: auto;
}

#input-box {
  font-size: 1.5em;
  width: 50%;
  margin-top: 5px;
  padding: 5px;
  border: none;
  border-bottom: 2px solid blue;
}

#mybtn {
  background-color: rgb(21, 170, 240);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 0 0 75px;
  cursor: pointer;
}

.delbtn {
  background-color: rgb(238, 53, 28);
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 10px;
  cursor: pointer;
}

.para {
  text-align: left;
  padding: 0;
  margin: 0;
}

<h1>TODO APP</h1>
<input type="text" name="" id="input-box" maxlength="25">
<br><button id="mybtn" onclick="todo();">Add Item</button>
<table id="mytable"></table>