如果您使用的是引導程序（我猜是字體很棒，看看 fa fa 項目），您可以輕松地使用pull-right該類，就像這樣（檢查我是否僅在單擊事件中添加了這些類）
(function(){
'use strict'
const input = document.querySelector('#input-todo')
const btn = document.querySelector('#button-todo')
const ul = document.querySelector('#list')
btn.addEventListener('click', () =>{
const li = document.createElement('li')
li.className='block'
const iCheck = document.createElement('i')
iCheck.className='fa fa-check pull-right'
const iTrash = document.createElement('i')
iTrash.className='fa fa-trash pull-right'
const textInput = document.createTextNode(input.value)
li.appendChild(iCheck)
li.appendChild(iTrash)
li.appendChild(textInput)
ul.appendChild(li)
input.value = ''
input.focus()
})
input.addEventListener('keyup', (e)=>{
if(e.target.keyCode === 13){
const li = document.createElement('li')
const iCheck = document.createElement('i')
iCheck.className='fas fa-check'
const iTrash = document.createElement('i')
iTrash.className='fas fa-trash-alt'
const textInput = document.createTextNode(input.value)
li.appendChild(iCheck)
li.appendChild(iTrash)
li.appendChild(textInput)
ul.appendChild(li)
input.value = ''
input.focus()
}
})
})()
:root{
--color-primary: rgb(91, 213, 224);
--color-secondary:rgb(240, 128, 128);
--color-tertiary:rgb(2, 0, 117);
}
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html{
font-size:100%;
height:100vh;
}
body {
font-family:sans-serif;
box-sizing: border-box;
line-height:1.7;
height:100vh;
display:flex;
justify-content:center;
align-items: center;
}
.container{
background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));
border-radius:3px;
/* how to do a box-shadow looking smooth */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
0 2px 2px rgba(0, 0, 0, 0.12),
0 4px 4px rgba(0, 0, 0, 0.12),
0 8px 8px rgba(0, 0, 0, 0.12),
0 16px 16px rgba(0, 0, 0, 0.12);
padding:2rem;
display:grid;
grid-template-rows:min-content minmax(10rem,max-content) min-content;
grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))
}
.item1{
grid-row: 1 / 2;
grid-column:1 / -1;
text-align:center;
}
.item2{
grid-row: 2 / 3;
grid-column:1 / -1;
margin:2rem 0;
}
.item3{
grid-row: 3 / 4;
grid-column:1 / -1;
display:flex;
flex-direction: row;
justify-content:space-between;
}
.title{
color:var(--color-secondary);
}
.subtitle{
color:var(--color-tertiary);
font-size:1rem;
}
.list-todo{
list-style-type:none;
}
li {
background-color:white;
padding:.5rem 1rem;
color: var(--color-tertiary);
font-size: 1rem;
font-weight: 600;
margin:1rem 0;
/* display:flex;
align-items:center;
justify-content:flex-start; */
}
/* ICONS */
.fas:first-child{
margin-left:auto;
}
.fas,
.far{
margin:0 1rem;
}
.fa-check{
color:var(--color-tertiary);
}
.fa-trash-alt{
color:var(--color-secondary);
}
.write-todo{
padding:.5rem 1.5rem;
outline:transparent;
border:none;
}
.add-todo{
padding:.3rem .5rem;
border:1px solid white;
background-color:white;
color: var(--color-secondary);
font-weight:600;
font-size:1rem;
letter-spacing: .2rem;
cursor:pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="item1">
<h2 class="title">To Do App</h2>
<h3 class="subtitle">Write here your to do′s</h3>
</div>
<div class="item2">
<ul class="list-todo" id ="list">
</ul>
</div>
<div class="item3">
<input class="write-todo" id="input-todo" type="text">
<button class="add-todo" id='button-todo' type="submit">Add Note</button>
</div>
</div>
