按钮 - 我如何将一个按钮移动到另一个按钮的右侧答案

【问题标题】：Buttons-how do i move one button to the right of another button按钮 - 我如何将一个按钮移动到另一个按钮的右侧
【发布时间】：2020-03-03 03:45:45
【问题描述】：

我在同一行上有一个删除按钮和一个编辑按钮。两者都在右侧，因为我使用了向右浮动。现在，编辑按钮位于删除按钮的左侧，我希望编辑按钮位于删除按钮的右侧。

这可能看起来很愚蠢，但我不知道。祝你有美好的一天，如果你花时间回答，谢谢！ ---HTML---

<!DOCTYPE html>
<html>

    <head>
        <title>To Do List</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    </head>

    <body>
        <h1 class="header">To Do List</h1>
        <div id="toDoForm">
            <input id="toDoInput" placeholder="What would you like to do?">
            <button id="dynamicButton" type="button">Add</button>
        </div>

        <ol id="toDoList">
        </ol>

        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
        <script type="text/javascript" src="notify.min.js"></script>

        <script type = "text/javascript" src = "script.js"></script>
    </body>

</html>

---CSS---

.deleteButton {
    font-style: normal;
    color: red;
    float: right;
    font-size: 20px;
    overflow: hidden;
    background-color: black;

    /*display: none !important;*/
}

.deleteButton:hover {
    cursor: pointer;
    font-size: 22px;
}

.editButton {
    background-color: yellow;
    float: right;
    display: inline-block;
}

#dynamicButton {
    height: 35px;
    float: left;
}

.buttonGroupAll {
    display: flex;

}

li{
    margin: 10px 0px;
    font-size: 25px;

    float: left;
    clear: both;
    padding: 5px 0px;
    width: 500px;
    background-color: green;
}

li:hover .deleteButton {
    /*display: inline-block !important;*/
}

#toDoInput {
    font-size: 25px;
    margin: 0px 0px 0px 16px;
    float: left;
}

.header {
    margin-left: 16px;
}

---JS---

//fire add Element Function when addButton is pressed
let addButton = document.getElementById("dynamicButton");
addButton.addEventListener('click',function(){
    addElement();
});
//add Element to OL 
function addElement() {
    let text = $("#toDoInput").val();
    if(!text){
        $.notify("Text is required!",{
            position:"top-left",
            className:"warn"
        });
        return;
    }
    //Create li
    let newItem = document.createElement("li");
    newItem.innerHTML = text;
    //Create del button
    let i = document.createElement("i");
    i.className = "fas fa-times-circle deleteButton";
    //append del button to li
    newItem.appendChild(i);
    //create edit button
    let editButton = document.createElement('i');
    editButton.className = "fas fa-edit editButton";
    //Append edit button to li
    newItem.appendChild(editButton);
    //append li to ol
    document.getElementById("toDoList").appendChild(newItem);
    //clear input value
    document.getElementById("toDoInput").value = "";
}

let deleteButton = document.getElementsByClassName("deleteButton");
let toDoList = document.getElementById("toDoList");

 document.addEventListener('click',function(e){
    if(e.target && e.target.className.includes('deleteButton')){
          console.log(e.target);
          toDoList.removeChild(e.target.parentNode);
     }
 });

var input = document.getElementById("toDoInput");
input.addEventListener("keyup", function(event) {
    console.log(event);
  if (event.keyCode === 13) {
   event.preventDefault();
   addElement();
  }
});

【问题讨论】：

只需更改 html 对象的顺序
问题是我只在 js 中创建了我的编辑按钮，所以我不知道如何更改顺序。如果您可以输入代码 sn-p，那将非常感谢
然后在您创建对象或在 HTML 中创建空 div 时更改 JS 的顺序，并在附加新 DOM 时选择正确的。如果你提供一个 sn-p (codepen / jsfiddle / SO) 我可以去。
上面提供了我所有的代码

标签： javascript html css button alignment

【解决方案1】：

您所要做的就是更改元素创建过程的顺序，因为浏览器会从上到下呈现 html。

还可以使用开发人员工具来调试/调查您呈现的前端以查找错误。

//fire add Element Function when addButton is pressed
let addButton = document.getElementById("dynamicButton");
addButton.addEventListener('click',function(){
    addElement();
});
//add Element to OL 
function addElement() {
    let text = $("#toDoInput").val();
    if(!text){
        $.notify("Text is required!",{
            position:"top-left",
            className:"warn"
        });
        return;
    }
    //Create li
    let newItem = document.createElement("li");
    newItem.innerHTML = text;



//create edit button
    let editButton = document.createElement('i');
    editButton.className = "fas fa-edit editButton";
    //Append edit button to li
    newItem.appendChild(editButton);



//Create del button
    let i = document.createElement("i");
    i.className = "fas fa-times-circle deleteButton";
    //append del button to li
    newItem.appendChild(i);
    //append li to ol
    document.getElementById("toDoList").appendChild(newItem);
    //clear input value
    document.getElementById("toDoInput").value = "";
}



let deleteButton = document.getElementsByClassName("deleteButton");
let toDoList = document.getElementById("toDoList");

 document.addEventListener('click',function(e){
    if(e.target && e.target.className.includes('deleteButton')){
          console.log(e.target);
          toDoList.removeChild(e.target.parentNode);
     }
 });

var input = document.getElementById("toDoInput");
input.addEventListener("keyup", function(event) {
    console.log(event);
  if (event.keyCode === 13) {
   event.preventDefault();
   addElement();
  }
});

【讨论】：