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

                'use strict'

                const input = document.querySelector('#input-todo')

                const btn = document.querySelector('#button-todo')

                const ul = document.querySelector('#list')

                btn.addEventListener('click', () =>{

                    const span = document.createElement('span')     

                    const li = document.createElement('li')

                    const iCheck = document.createElement('i')

                          iCheck.className='fa fa-check'

                    const iTrash = document.createElement('i')

                          iTrash.className='fa fa-trash'

                    const textInput = document.createTextNode(input.value)

                  

                    span.appendChild(iCheck)

                    span.appendChild(iTrash)

                    li.appendChild(textInput)

                    li.appendChild(span)

                    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:space-between; 

}

/* ICONS */

.fa:first-child{

   margin-left:auto;

}

.fa,

.fa{

    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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

Answer 2

不要碰你的风格，只需在你的 js 函数中像这样改变你的追加顺序：

li.appendChild(textInput)  // this will append your text

li.appendChild(iCheck)     // this will append the checked icon

li.appendChild(iTrash)     // this will append the trash icon

Answer 3

如果您使用的是引导程序（我猜是字体很棒，看看 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>