0
405
Views¿Crear burbujas de palabras como botones en HTML/CSS/JS?
¡Estoy tratando de crear varias palabras con burbujas como botones!
¿Cuál es la mejor manera de abordar el diseño a continuación usando CSS o cualquier biblioteca JS?
Puede haber muchos botones (depende de los datos de DB)
Lo que he probado:
#tagsContainer { float: left; width: 25vw; margin-top: 10vh; overflow: hidden; } #tags { display: grid; justify-content: space-between; grid-gap: 8px; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); } #tag { background-color: #2F3841; border-radius: 8px; margin-top: 10px; width: max-content; } <div id="tagsContainer"> <h3 id="tagsTitle">TOP TAGS</h3> <div id="tags"> <div id="tag"> <h4 id="tagTitle">Flutter</h4> </div> <div id="tag"> <h4 id="tagTitle">Deep Learning</h4> </div> <div id="tag"> <h4 id="tagTitle">Machine Learning</h4> </div> </div> </div>¡El problema es que cuando se usa el diseño de cuadrícula, todas las columnas tendrían el mismo tamaño!
·
Juan Pablo Isaza
2 answers
Answer question0
Simplemente use display:inline-block y diseñe su contenedor como desee. PD: tiene la misma identificación varias veces, use la clase en su lugar porque la identificación debe ser única
#tagsContainer { /*float: left; REMOVE IT!!!*/ width: 25vw; margin-top: 10vh; overflow: hidden; } #tags { /* NOT NECESSARY display: grid; justify-content: space-between; grid-gap: 8px; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); */ } .tag { background-color: #2F3841; border-radius: 8px; margin-top: 10px; width: max-content; display:inline-block; } <div id="tagsContainer"> <h3 id="tagsTitle">TOP TAGS</h3> <div id="tags"> <div class="tag"> <h4 class="tagTitle">Flutter</h4> </div> <div class="tag"> <h4 class="tagTitle">Deep Learning</h4> </div> <div class="tag"> <h4 class="tagTitle">Machine Learning</h4> </div> </div> </div>
·
Juan Pablo Isaza
Report
0
¿Quieres decir esto?
body { background: #202223; } #tags { font-family: cursive; width: 292px; } .tag { font-family: inherit; background: #2b333b; font-size: 14px; padding: 10px 33px; border: none; border-radius: 16px; color: #d4d4d4; font-style: italic; display: inline-block; width: max-content; margin: 4px 4px; } .tag:hover { opacity: 0.9; } .tag:focus { outline: 1px solid #6868688f; outline-offset: -3px; } <div id="tags"> <button class="tag">Flutter</button> <button class="tag">Data Science</button> <button class="tag">CSS</button> <button class="tag">Deep Learning</button><button class="tag">Machine Learning</button> </div>
·
Juan Pablo Isaza
Report
Answer question