saut de ligne après un bouton

Par joyolo, il y a 3 ans

Les bases HTML/CSS

bonjour; je suis débutant en html et css. J'ai créé plusiuers boutons pour m'entrainer mais je but e sur un point : comment faire un saut de ligne après un bouton.
J'ai 5 boutons alignés mais je veux que le 5e passe en dessous aligné sur le premier.
merci

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

2 réponses

popotte, il y a 3 ans

Hello :)

Alors tu as plusieurs façons de faire:

// Comme dit plus haut le br, mais c'est pas vraiment l'idéal, faut éviter d'utiliser les br pour des blocks, dans un design complexe ça peut faire des surprises <button></button> <button></button> <button></button> <button></button><br> <button></button> // Séparer dans des div, c'est une façon de faire correcte, mais bon pas l'idéal <div style="margin-bottom: 2rem;"> <button></button> <button></button> <button></button> <button></button> </div> <div> <button></button> </div> // La bonne façon de faire c'et d'utiliser soit flexbox soit la grid (dans la majorités des cas faut utiliser la grid, mais à voir selon le design) // Flexbox <div style="display: flex; flex-wrap: wrap;"> <div style="width: 25%; padding: 0 2rem;"> <button></button> </div> <div style="width: 25%; padding: 0 2rem;"> <button></button> </div> <div style="width: 25%; padding: 0 2rem;"> <button></button> </div> <div style="width: 25%; padding: 0 2rem;"> <button></button> </div> <div style="width: 25%; padding: 0 2rem;"> <button></button> </div> </div> // Grid <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;"> <button></button> <button></button> <button></button> <button></button> </div>
joyolo, il y a 3 ans

merci pour vos explications