Quiero hacer una lista que tenga 3 elementos li ordenados horizontalmente. Estos aparecen gracias a una función. Pero cuando vuelva a activar esta función, quiero que los nuevos elementos li aparezcan debajo de los últimos, de forma vertical como una lista normal. Logré ordenar los 3 li horizontalmente, pero no puedo encontrar la manera de hacerlo funcionar como una lista vertical. Una nueva entrada para la lista aparece justo al lado de la última en lugar de debajo de ella.

Explicando mi código JS: agregué los tres elementos li con un botón de eliminación para eliminar esa entrada completa que contiene los 3 li.

Lo que obtuve:

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);