Question

我正在制作一份待办事项清单。每当用户输入新任务时，它将显示为列表项。在列表项中，我试图定位一个按钮元素，这样当用户点击它时，该项目可以转移到另一个列表 - “已完成的任务”。

我在列表中的按钮元素中遇到麻烦，以满足我的要求。我试图将它等同于“右对齐”，在list元素的末尾，以便按钮在文本完成给定的待办事项任务之后（我希望这是有意义的！）

HTML：

<div id="incomplete-tasks">
  <h4>INCOMPLETE TASKS</h4>
  <ul id="task-to-do">

  </ul>
</div>

CSS：

ul {
    list-style: none;
}

ul li {
    position: relative;
    margin: auto;
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    color: white;
    border: 1px solid white;
    border-radius: 3px;
    background-color: #6363B6;
}

li button {
    display: block;
    width: auto;
    padding: 1%;
    position: absolute;
    margin-left: 80%;
}

JS：

document.getElementById("add").addEventListener("click", function () {

  var taskinput = document.getElementById("task").value;  

  if (taskinput) {
    var tasktext = document.createTextNode(taskinput);
    var list = document.createElement("li");
    list.appendChild(tasktext);
    var button = document.createElement("button");
    button.innerHTML = "completed";
    list.appendChild(button);
    document.getElementById("task-to-do").appendChild(list);
    document.getElementById("task").value ="";
  } else {
    alert("Please enter a task");
  }
});

Answer 1

尝试使用它，它可能对您有所帮助：

li button {
display: block;
width: auto;
padding: 1%;
clear:both;
float:right;
}

试试这个浮动属性它可能对你有帮助。

将列表父项定位为按钮子项

1 个答案: