lista

############# index.html ##############
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <input id="input" type="text">
        <button onclick="dodaj()">Button</button>
        <div id="main" class="main_class"></div>
    </body>
        <script src="script.js"></script>
</html>

############ script.js #############
const maindiv = document.getElementById("main");
const listaul = document.createElement('ul');
listaul.id = "listaul";
maindiv.appendChild(listaul);


function dodaj()
{
    const li = document.createElement("li");
    li.className = "lista";
    listaul.appendChild(li);
    const input = document.getElementById("input");
    li.innerHTML = input.value;
    input.value = "";
}
############# style.css ##############
.lista
{
    display:flex;
    align-items:center;
    justify-content: center;
    background-color:lightblue;
    width:200px;
    height:10px;
    padding:3px;
    margin:3px;
}