I'm having difficulty positioning the "close" button to the right side.
Even after attempting various CSS properties like float:right, right:0, and align-content:right, I still can't seem to get it in the proper position. index.html
<head>
<style>
.close{
right:0;
}
</style>
</head>
<body>
<div>
<input type = "text" size = "35" id="work" placeholder = "Enter your list here">
<input type="submit" onClick="appendToDoList()" value="Add to List">
</div>
<ul id="workUl">
<li>Work out</li>
</ul>
<script>
//include a close button for list
var getList= document.getElementsByTagName("LI");
var i;
for(i=0; i<getList.length; i++){
var span = document.createElement("SPAN");
var closebtn = document.createTextNode("\u00D7");
span.appendChild(closebtn);
getList[i].appendChild(span);
}
//add to the list
function appendToDoList(){
var ListN = document.createElement("li");
var N = document.getElementById("work").value;
var t = document.createTextNode(N);
ListN.appendChild(t);
if (N === '') {
alert("You must write something!");
} else {
document.getElementById("workUl").appendChild(ListN);
}
document.getElementById("work").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
var i;
for(i=0; i<close.length;i++){
}
ListN.appendChild(span);
}
The close button is supposed to be aligned to the right side. Can someone please offer some suggestions? I've also searched through similar posts in the past, but nothing seems to work for me.