jQuery在每次提交输入时将列表项更紧密地附加在一起

只有在提交第一次输入后，

（输入值）和

（删除按钮）的位置才正确。在每次提交时，这些要素越来越紧密，这不是期望的行为。 我希望每个输入都是第一个

这是我的建议

HTML:

<div class="list-container">
    <ul class="list">
    </ul>
</div>

$('input[name=listItem]').enterKey(function(){
    var toAdd = $('input[name=listItem]').val();
    $('.list').append('<li class="item">' + toAdd + '</li>', '<div class="btnDel">Delete</div>', '<br>')

jQuery:

<div class="list-container">
    <ul class="list">
    </ul>
</div>

$('input[name=listItem]').enterKey(function(){
    var toAdd = $('input[name=listItem]').val();
    $('.list').append('<li class="item">' + toAdd + '</li>', '<div class="btnDel">Delete</div>', '<br>')

$（'input[name=listItem]'）。enterKey（function（）{
var toAdd=$（'input[name=listItem]'）。val（）；
$（'.list'）.append（'
'+toAdd+'
'、'Delete'、'
'））

之所以发生这种情况，是因为您案例中的每个后续待办事项都试图在之前的待办事项中浮动

快速而棘手的解决方法可能是将清除：left添加到li，请参阅

---

但实际上，您必须重新编写标记-您不应该在ul

中插入除li之外的任何内容。实际上，您添加了错误的结构。您不应该使用任何其他元素作为ul的直接子元素

我已经更新了你的代码这里是新的代码，它是伟大的工作

这里有一些JS修改

// Form submit & Form clear function for Enter key press
    $('input[name=listItem]').enterKey(function(){
        var toAdd = $('input[name=listItem]').val();
        $('.list').append('<li class="item"><p>' + toAdd + '</p><div class="btnDel">Delete</div></li>')
    $('input[name=listItem]').closest('form').find("input[type=text]").val("")
    })

    // Form submit & Form clear function for button press
    $('#btnAdd').click(function(){
        var toAdd = $('input[name=listItem]').val();
        $('.list').append('<li class="item"><p>' + toAdd + '</p><div class="btnDel">Delete</div></li>')
    $('input[name=listItem]').closest('form').find("input[type=text]").val("")
    })

li{ 
    clear:both;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
}
li>p{
  float:left;
}
li>div{
  float:right;
}

---

你到底期望什么？你正在附加无效的标记。

append

中的逗号表示你正在UL中插入DIV和BR。你可以在li中使用具有特定宽度的DIV。在这个DIV中，你可以添加你想要的内容