JQuery添加li元素导致未对齐

// 假设原有的<li>元素有class="item"
$('ul').append('<li class="item">New Item</li>');

.item {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
}

ul {
    display: flex;
    flex-direction: column;
}

ul::after {
    content: "";
    display: table;
    clear: both;
}

/* 简单的CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

<ul id="myList">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
</ul>

.item {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
}

ul {
    display: flex;
    flex-direction: column;
}

$(document).ready(function() {
    $('#myList').append('<li class="item">New Item</li>');
});