saut de ligne après un bouton

joyolo
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

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
Auteur

merci pour vos explications