equal space between text and button [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to have equal space between text and button, but I am getting unequal space. See the image that I have attached; the red "delete" buttons and the text before that have unequal spaces.
Is there any CSS property that I can use so that the text doesn't push the button to the right?
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();
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>
<div id="mydiv"></div>
View on GitHub

Answer 1

You could use a <table> instead of a <div> and append the p in the left column and the button in the right, so the buttons are always above each other:
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>

Answer 2

One method is to align the text to the left and button to the right.
Below, I've used flexbox.
Each .para contains a <span> for the text and an <input> button.
Those two elements are positioned using the flexbox layout, with justify-content:space-between.
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);
}
#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;
}
<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>