TO DO APP - 如何将 2 个图标与 li 的右侧对齐？

Question

我正在使用 JavaScript 做一个待办事项列表来练习事件。在JavaScript我创建<li>并<i>与连接到与追加子李特定的类名。单击按钮时，li 将转到输出。一切正常，但发生的情况是首先是图标，然后是 li 的文本，就像它有一个对齐的权利。这是图像：

我想要的是这个，文本左对齐，图标对齐到末尾（右）。和图片一模一样。无论文本的长度：

我试过 display flex 但没有任何反应。

(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')

                    const iCheck = document.createElement('i')

                          iCheck.className='fas fa-check'

                    const iTrash = document.createElement('i')

                          iTrash.className='far 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()

                })

                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()

                    }

                })

            })()

Answer 1

首先，您需要对元素重新排序，以便首先显示文本，然后显示图标……justify-content : flex-start将li在开始时（即左侧）显示所有元素，解决方案将改为使用justify-content : space-between，然后将您的图标嵌套到一个元素，因此它们被推到另一侧（您也可以使用margin-left : auto）这里是一个片段：(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'use strict'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const input = document.querySelector('#input-todo')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const btn = document.querySelector('#button-todo')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const ul = document.querySelector('#list')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.addEventListener('click', () =>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const span = document.createElement('span')&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const li = document.createElement('li')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iCheck = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iCheck.className='fa fa-check'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iTrash = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iTrash.className='fa fa-trash'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const textInput = document.createTextNode(input.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; span.appendChild(iCheck)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; span.appendChild(iTrash)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(textInput)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(span)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(li)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.value = ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.focus()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.addEventListener('keyup', (e)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(e.target.keyCode === 13){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const li = document.createElement('li')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iCheck = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iCheck.className='fas fa-check'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iTrash = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iTrash.className='fas fa-trash-alt'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const textInput = document.createTextNode(input.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(iCheck)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(iTrash)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(textInput)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(li)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.value = ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.focus()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })():root{&nbsp;--color-primary: rgb(91, 213, 224);&nbsp;--color-secondary:rgb(240, 128, 128);&nbsp;--color-tertiary:rgb(2, 0, 117);}*,*:after,*:before {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; box-sizing: inherit;}html{&nbsp; &nbsp; font-size:100%;&nbsp; &nbsp; height:100vh;}body {&nbsp; &nbsp; font-family:sans-serif;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; line-height:1.7;&nbsp; &nbsp; height:100vh;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; justify-content:center;&nbsp; &nbsp; align-items: center;}.container{&nbsp; &nbsp; background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));&nbsp; &nbsp; border-radius:3px;&nbsp; &nbsp; /* how to do a box-shadow looking smooth */&nbsp; &nbsp; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 2px 2px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 4px 4px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 8px 8px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 16px 16px rgba(0, 0, 0, 0.12);&nbsp; &nbsp; padding:2rem;&nbsp; &nbsp; display:grid;&nbsp; &nbsp; grid-template-rows:min-content minmax(10rem,max-content) min-content;&nbsp; &nbsp; grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))}.item1{&nbsp; &nbsp; grid-row: 1 / 2;&nbsp; &nbsp; grid-column:1 / -1;&nbsp; &nbsp; text-align:center;}.item2{&nbsp; &nbsp; grid-row: 2 / 3;&nbsp; &nbsp; grid-column:1 / -1;&nbsp; &nbsp; margin:2rem 0;}.item3{&nbsp; &nbsp; grid-row: 3 / 4;&nbsp; &nbsp; grid-column:1 / -1;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; justify-content:space-between;}.title{&nbsp; &nbsp; color:var(--color-secondary);}.subtitle{&nbsp; &nbsp; color:var(--color-tertiary);&nbsp; &nbsp; font-size:1rem;}.list-todo{&nbsp; &nbsp; list-style-type:none;}li {&nbsp; &nbsp; background-color:white;&nbsp; &nbsp; padding:.5rem 1rem;&nbsp; &nbsp; color: var(--color-tertiary);&nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; &nbsp;margin:1rem 0;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; align-items:center;&nbsp; &nbsp; justify-content:space-between;&nbsp;}/* ICONS */.fa:first-child{&nbsp; &nbsp;margin-left:auto;}.fa,.fa{&nbsp; &nbsp; margin:0 1rem;}.fa-check{&nbsp; &nbsp; color:var(--color-tertiary);}.fa-trash-alt{&nbsp; &nbsp; color:var(--color-secondary);}.write-todo{&nbsp; &nbsp; padding:.5rem 1.5rem;&nbsp; &nbsp; outline:transparent;&nbsp; &nbsp; border:none;}.add-todo{&nbsp; &nbsp; padding:.3rem .5rem;&nbsp; &nbsp; border:1px solid white;&nbsp; &nbsp; background-color:white;&nbsp; &nbsp; color: var(--color-secondary);&nbsp; &nbsp; font-weight:600;&nbsp; &nbsp; font-size:1rem;&nbsp; &nbsp; letter-spacing: .2rem;&nbsp; &nbsp; cursor:pointer;}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="title">To Do App</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="subtitle">Write here your to do´s</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="list-todo" id ="list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="write-todo" id="input-todo" type="text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="add-todo" id='button-todo' type="submit">Add Note</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;</div>

Answer 2

不要碰你的风格，只需在你的 js 函数中像这样改变你的追加顺序：li.appendChild(textInput)&nbsp; // this will append your textli.appendChild(iCheck)&nbsp; &nbsp; &nbsp;// this will append the checked iconli.appendChild(iTrash)&nbsp; &nbsp; &nbsp;// this will append the trash icon

Answer 3

如果您使用的是引导程序（我猜是字体很棒，看看 fa fa 项目），您可以轻松地使用pull-right该类，就像这样（检查我是否仅在单击事件中添加了这些类）(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'use strict'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const input = document.querySelector('#input-todo')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const btn = document.querySelector('#button-todo')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const ul = document.querySelector('#list')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.addEventListener('click', () =>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const li = document.createElement('li')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.className='block'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iCheck = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iCheck.className='fa fa-check pull-right'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iTrash = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iTrash.className='fa fa-trash pull-right'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const textInput = document.createTextNode(input.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(iCheck)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(iTrash)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(textInput)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(li)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.value = ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.focus()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.addEventListener('keyup', (e)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(e.target.keyCode === 13){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const li = document.createElement('li')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iCheck = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iCheck.className='fas fa-check'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const iTrash = document.createElement('i')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iTrash.className='fas fa-trash-alt'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const textInput = document.createTextNode(input.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(iCheck)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(iTrash)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(textInput)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(li)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.value = ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.focus()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })():root{&nbsp;--color-primary: rgb(91, 213, 224);&nbsp;--color-secondary:rgb(240, 128, 128);&nbsp;--color-tertiary:rgb(2, 0, 117);}*,*:after,*:before {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; box-sizing: inherit;}html{&nbsp; &nbsp; font-size:100%;&nbsp; &nbsp; height:100vh;}body {&nbsp; &nbsp; font-family:sans-serif;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; line-height:1.7;&nbsp; &nbsp; height:100vh;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; justify-content:center;&nbsp; &nbsp; align-items: center;}.container{&nbsp; &nbsp; background:linear-gradient(to right top, var(--color-primary), var(--color-tertiary));&nbsp; &nbsp; border-radius:3px;&nbsp; &nbsp; /* how to do a box-shadow looking smooth */&nbsp; &nbsp; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 2px 2px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 4px 4px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 8px 8px rgba(0, 0, 0, 0.12),&nbsp; &nbsp; 0 16px 16px rgba(0, 0, 0, 0.12);&nbsp; &nbsp; padding:2rem;&nbsp; &nbsp; display:grid;&nbsp; &nbsp; grid-template-rows:min-content minmax(10rem,max-content) min-content;&nbsp; &nbsp; grid-template-columns: repeat(auto-fit,minmax(25rem,max-content))}.item1{&nbsp; &nbsp; grid-row: 1 / 2;&nbsp; &nbsp; grid-column:1 / -1;&nbsp; &nbsp; text-align:center;}.item2{&nbsp; &nbsp; grid-row: 2 / 3;&nbsp; &nbsp; grid-column:1 / -1;&nbsp; &nbsp; margin:2rem 0;}.item3{&nbsp; &nbsp; grid-row: 3 / 4;&nbsp; &nbsp; grid-column:1 / -1;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; justify-content:space-between;}.title{&nbsp; &nbsp; color:var(--color-secondary);}.subtitle{&nbsp; &nbsp; color:var(--color-tertiary);&nbsp; &nbsp; font-size:1rem;}.list-todo{&nbsp; &nbsp; list-style-type:none;}li {&nbsp; &nbsp; background-color:white;&nbsp; &nbsp; padding:.5rem 1rem;&nbsp; &nbsp; color: var(--color-tertiary);&nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; &nbsp;margin:1rem 0;&nbsp; &nbsp; /* display:flex;&nbsp; &nbsp; align-items:center;&nbsp; &nbsp; justify-content:flex-start; */}/* ICONS */.fas:first-child{&nbsp; &nbsp;margin-left:auto;}.fas,.far{&nbsp; &nbsp; margin:0 1rem;}.fa-check{&nbsp; &nbsp; color:var(--color-tertiary);}.fa-trash-alt{&nbsp; &nbsp; color:var(--color-secondary);}.write-todo{&nbsp; &nbsp; padding:.5rem 1.5rem;&nbsp; &nbsp; outline:transparent;&nbsp; &nbsp; border:none;}.add-todo{&nbsp; &nbsp; padding:.3rem .5rem;&nbsp; &nbsp; border:1px solid white;&nbsp; &nbsp; background-color:white;&nbsp; &nbsp; color: var(--color-secondary);&nbsp; &nbsp; font-weight:600;&nbsp; &nbsp; font-size:1rem;&nbsp; &nbsp; letter-spacing: .2rem;&nbsp; &nbsp; 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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="title">To Do App</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="subtitle">Write here your to do´s</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="list-todo" id ="list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="write-todo" id="input-todo" type="text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="add-todo" id='button-todo' type="submit">Add Note</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;</div>