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

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

快速而讨厌的修复可能是将 clear：left 添加到 li ，请参阅updated pen。

li {    
    float: left;
    clear: left;
    ...

但实际上你必须重做你的标记 - 你不应该在 ul 中插入除 li 之外的任何内容。

Answer 2

实际上你的结构是错误的。你不应该使用任何其他元素作为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;
}

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

2 个答案: