Bonjour PapyJP,
Comme le souligne @Niuxe, l'extrait de code présenté n'est pas valide.
Tu as probablement un
cafouillage dans la structure HTML et l'application des styles. Ton gros bouton radio, se retrouve probablement en enfant direct d'une grille (flex ou grid), du coup il se trouve étiré sur toute la hauteur disponible de la cellule de grille qu'il occupe.
Par ailleurs,
je vois que tu utilise
flex en colonne , autant se servir de
grid qui se déroule en colonne par défaut et sera bien plus efficace.
Le résultat visuel attendu, ne nécessite pas l'usage de
span si tu utilise un système de grille. Le code peut-être réduit aux éléments de formulaire distribués dans une grille.
Je te propose de nettoyer ton code de ces span et de distribuer en 2 colonnes les label et input via
display:grid plutôt que
flex.
coté HTML
1er option : label et input liés mais séparés :
<fieldset>
<legend> Affectez une catégorie à cette idée</legend>
<input type="radio" id="idea1" name="idea1">
<label for="idea1"> idée 1 </label>
<!-- etc. -->
<input type="submit" value="ok" >
</fieldset>
2eme option reprenant ta structure avec les input dans les labels:
<fieldset>
<legend> Affectez une catégorie à cette idée</legend>
<label for="idea7"><input type="radio" id="idea7" name="idea7"> idée 7 </label>
<!-- (liaison via for peut-être redondante) etc. -->
<input type="submit" value="ok" >
</fieldset>
Coté CSS
Pour la première et base de la seconde option:
fieldset {
display:grid;/* au lieu flex column */
grid-template-columns: 2em auto; /* 2 colonne pour label + input */
align-items:center;/* alignement vertical, pas d'etirement */
gap:.6em .2em; /* espacement entre les cellules */
}
legend {
padding-inline:1em;
font-weight:bolder;
}
[type="submit"] {
grid-column:1/-1;
margin-inline-end:auto;
}
Surcharge pour la seconde option: Les label reprennent la grille principale
#option2 label {
display:grid;
grid-column:1/-1;
grid-template-columns:subgrid;
align-items:center;
}
Tu peut voir et jouer avec ces codes ici
https://codepen.io/gc-nomade/pen/VYvPMQp
Cdt
