javascript - 问：常规垂直 ul 但 li 元素水平排序

Question

我想制作一个水平排列有 3 个 li 元素的列表。由于功能，这些显示出来。但是当再次触发此功能时，我希望新的 li 元素以垂直方式显示在最后一个元素的下方，就像常规列表一样。我设法让 3 li 水平排列，但找不到让它像垂直列表一样工作的方法。列表的新条目显示在最后一个条目旁边，而不是在其下方。

解释我的 JS 代码：我将所有三个 li 元素都附加了一个删除按钮，以删除包含所有 3 个 li 的完整条目。

我得到了什么：

CSS

.list {
list-style: none;
text-align: center;
}

.list li {
display: inline;
}

JS

const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = 'X';
btn.addEventListener("click", (e) => deleteExpense(e));

const li3 = document.createElement('li');
li3.textContent = `${amount}`;

const li2 = document.createElement('li');
li2.textContent = `${date}`;
li2.appendChild(li3);

const li1 = document.createElement('li');
li1.textContent = `${place}`;
li1.appendChild(li2);

li1.appendChild(btn);

list.appendChild(li1);

标签： javascriptcsslisthtml-lists