CSS: después de hacer clic en el botón, verá que los divs se crean en línea. Quiero que los "divs" de la segunda fila se organicen justo debajo de la primera fila de "divs", pero se organizan dejando un espacio. Las alineaciones de texto dentro de los "divs" no deberían alterarse.
function myFunction() { addWordToList("Apple", "Fruit"); } var spno = 0; function addWordToList(Word, Meaning) { spno++; var dv = document.createElement("DIV"); document.body.appendChild(dv); dv.setAttribute("class", "tooltip"); dv.setAttribute("id", "pilldiv"+spno); document.getElementById("pilldiv"+spno).textContent=Word; dv.insertAdjacentHTML('afterend', " "); var spn = document.createElement("SPAN"); dv.appendChild(spn); spn.setAttribute("class", "tooltiptext"); spn.setAttribute("id", "spn"+spno); document.getElementById("spn"+spno).textContent=Meaning; } .tooltip { position: relative; display: inline-block; width: auto; height: 1.6em; margin: 4em auto; padding-left: 10px; padding-right: 10px; border-radius: 10%/50%; background: linear-gradient(to right, #11998E , #38EF7D); font-weight: 700; } .tooltip .tooltiptext { visibility: hidden; } .tooltip:hover .tooltiptext { visibility: visible; } <!DOCTYPE html> <html> <head></head> <body> <button onclick="myFunction()">Click to Create Divs</button> </body> </html>Cambie el css de la información sobre herramientas a lo siguiente:
.tooltip { position: relative; display: inline-block; width: auto; height: 1.6em; padding-left: 10px; padding-right: 10px; border-radius: 10%/50%; background: linear-gradient(to right, #11998E , #38EF7D); font-weight: 700; }es decir, elimine "margen: 4em auto;". Debido al margen, la altura real de la caja aumenta y se crea el espacio.