It is necessary that li in the line was not more than 4 pieces, after exceeding the limit, the new li was inserted into the second row. no more than two rows, width = 300px

var arr = []; var arrList = ""; isHobbies = function() { var str = document.getElementById('hobbies'); var theStr = str.value; arr.push(theStr); document.getElementById("str").innerHTML = ""; for (var i = 0; i < arr.length; i++) { arrList = "<li>" + arr[i] + "</li>"; document.getElementById("str").innerHTML += arrList; } } 
 .interes { display: flex; } 
  <div class="hob"> <label for="hobbies">Интересы</label> <input type="text" id="hobbies" placeholder="Ваш интерес?" name="" value=""> <input type="button" id="addHobbies" name="" value="Добавить интерес" onclick="isHobbies()"> <div id="str" class="interes"> </div> </div>

    2 answers 2

    So?

     const input = document.getElementById('input'); const list = document.getElementById('list'); const items = []; const maxItems = 8; addItem = () => { const value = input.value; if (value) { const item = document.createElement('li'); item.className = 'item'; item.innerHTML = value; if (items.length < maxItems) items.push(item); else { } list.innerHTML = ''; for (const el of items) { list.innerHTML += el.outerHTML; } } } 
     #list { border: 1px solid black; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 10px 0 0; padding: 5px 7.5px 10px; width: 300px; } #list>.item { border: 1px solid black; flex-grow: 1; margin: 5px 2.5px 0; overflow: auto; padding: 5px; width: calc(25% - 20px); } 
     <input id="input" type="text" /> <button type="button" onclick="addItem()">Button</button> <ul id="list"></ul>

    Under your js:

     var arr = []; var arrList = ""; isHobbies = function() { var str = document.getElementById('hobbies'); var theStr = str.value; if (arr.length < 8) arr.push(theStr); document.getElementById("str").innerHTML = ""; for (var i = 0; i < arr.length; i++) { arrList = "<li>" + arr[i] + "</li>"; document.getElementById("str").innerHTML += arrList; } } 
     #str { border: 1px solid black; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 10px 0 0; padding: 5px 7.5px 10px; width: 300px; } #str>li { border: 1px solid black; flex-grow: 1; margin: 5px 2.5px 0; overflow: auto; padding: 5px; width: calc(25% - 20px); } 
     <input id="hobbies" type="text" /> <button type="button" onclick="isHobbies()">Button</button> <ul id="str"></ul>

    • I really thought that it was possible to solve the problem without changing js) - Hundreds of Personalities
    • Corrected for your JS (see the second code). But I still had to add a limit on 8 items. - Kvilios 3:12 pm

    Oh, those js-nicks ...) Here's an option for css.

     var arr = []; var arrList = ""; isHobbies = function() { var str = document.getElementById('hobbies'); var theStr = str.value; arr.push(theStr); document.getElementById("str").innerHTML = ""; for (var i = 0; i < arr.length; i++) { arrList = "<li>" + arr[i] + "</li>"; document.getElementById("str").innerHTML += arrList; } } 
     .interes { column-count: 4; overflow: hidden; width: 300px; max-height: 2.4em; line-height: 1.2; } 
     <div class="hob"> <label for="hobbies">Интересы</label> <input type="text" id="hobbies" placeholder="Ваш интерес?" name="" value=""> <input type="button" id="addHobbies" name="" value="Добавить интерес" onclick="isHobbies()"> <div id="str" class="interes"> </div> </div>