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

Question

<li> 的位置(输入值)和 <div> (删除按钮)只有在提交第一个输入后才是正确的。在彼此提交时，这些元素越来越紧密地结合在一起，这不是期望的行为。我希望每个输入都看起来像第一个。

这是 Pen .

HTML:

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

CSS:

ul {
text-align: center;
list-style: none;
font-family: 'Noto Sans', sans-serif; 
}

li {    
float: left;
padding-top: 8px;
padding-bottom: 8px;
}

.btnDel {
float: right;
font-family: 'Raleway'; 
width: 70px;
height: 20px;
border-radius: 15px;
border: 1px solid #F64747;
background-color: white;
padding-top: 3px;
padding-bottom: 1px;
color: #F64747;
cursor: pointer;
}

jQuery:

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

Answer 1

实际上您添加了错误的结构。您不应将任何其他元素用作 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("")
    })

和一些 CSS 修改

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