Buttons-如何将一个按钮移至另一个按钮的右侧

问题描述 投票：0回答：1

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

看似愚蠢，但我毫无头绪。祝您度过愉快的一天，如果您花时间回答，谢谢！--- 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();
  }
});
javascript html css button alignment
1个回答
0
投票

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

还使用开发人员工具调试/调查渲染的前端以发现错误。

我强烈推荐https://developers.google.com/web/tools/chrome-devtools

//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();
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.