Question

我希望文本和按钮之间有相同的空间，但我的空间不平等。看到我附上的图像;红色＆＃34;删除＆＃34;按钮和之前的文本有不等的空格。

我可以使用任何CSS属性，以便文本不会将按钮向右推吗？

＆＃13;

function todo() {
  var ParentDiv = document.getElementById('mydiv');
  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);
  newPara.appendChild(del);
  ParentDiv.appendChild(newPara);
}

// 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();

＆＃13;

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;
}

＆＃13;

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

＆＃13;

View on GitHub

Answer 1

您可以使用<table>代替<div>并在左栏中添加p，在右侧添加按钮，因此按钮始终位于彼此之上：

＆＃13;

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();

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

一种方法是将文本对齐左侧，将按钮对齐到右侧下面，我使用了flexbox。

每个.para包含<span>文本和<input>按钮这两个元素使用flexbox布局定位，justify-content:space-between。

＆＃13;

function todo() {
  var ParentDiv = document.getElementById('mydiv');
  var newPara = document.createElement('p');
  var value = document.getElementById('input-box').value;
  var newText = document.createElement('span');
  newText.innerHTML = value;
  var del = document.createElement('input');
  randomId = Math.random();
  newPara.setAttribute("class", "para");
  del.setAttribute("type", "button");
  del.setAttribute("value", "delete");
  del.setAttribute("onclick", "delt(this)");
  del.setAttribute("class", "delbtn");
  newPara.appendChild(newText);
  newPara.appendChild(del);
  ParentDiv.appendChild(newPara);
}

function delt(me) {
  var parent = me.parentNode;
  var grandParent = parent.parentNode;
  grandParent.removeChild(parent);
}

＆＃13;

#container {
  width: 50%;
  text-align: center;
}

#input-box {
  font-size: 1.5em;
  margin-top: 5px;
  padding: 5px;
  border: none;
  border-bottom: 2px solid blue;
  width: 100%;
  box-sizing: border-box;
}

#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;
  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;
}

.para {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<div id="container">
  <h1>TODO APP</h1>
  <input type="text" name="" id="input-box" maxlength="25">
  <br><button id="mybtn" onclick="todo();">Add Item</button>
  <div id="mydiv">
    <p class="para">
      <span>Tester</span>
      <input type="button" value="delete" onclick="delt(this)" class="delbtn">
    </p>
    <p class="para">
      <span>Another Test</span>
      <input type="button" value="delete" onclick="delt(this)" class="delbtn">
    </p>
    <p class="para">
      <span>Sample Text</span>
      <input type="button" value="delete" onclick="delt(this)" class="delbtn">
    </p>
    <p class="para">
      <span>Item Title</span>
      <input type="button" value="delete" onclick="delt(this)" class="delbtn">
    </p>
  </div>
</div>

＆＃13;

文本和按钮之间的空间相等

2 个答案: