Impossible de créer un fieldset sur une seule ligne?

**JMY78** · 26/06/2023, 22h29

Bonjour à tous,
Je me heurte à un truc tout bête, j'ai une liste de checkboxes que j'aimerais placer sur une seule ligne.
Je pensais y arriver avec les css, mais pas moyen, ça s'affiche toujours sur 2 lignes (j'ai essayé avec Chrome et Edge).
Le code est le suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  <fieldset id="fieldSetDays">
      <legend>Cocher les jours concernés</legend>
		<input type=checkbox id=lundi name=lundi value=Lundi> 			<label class=fieldToCheck for=lundi>Lundi</label><br>
		<input type=checkbox id=mardi name=mardi value=Mardi>			<label class=fieldToCheck for=mardi>Mardi</label><br>
		<input type=checkbox id=mercredi name=mercredi value=Mercredi>	<label class=fieldToCheck for=mercredi>Mercredi</label><br>
		<input type=checkbox id=jeudi name=jeudi value=Jeudi>			<label class=fieldToCheck for=jeudi>Jeudi</label><br>
		<input type=checkbox id=vendredi name=vendredi value=Vendredi>	<label class=fieldToCheck for=vendredi>Vendredi</label><br>
		<input type=checkbox id=samedi name=samedi value=Samedi>		<label class=fieldToCheck for=samedi>Samedi</label><br>
		<input type=checkbox id=dimanche name=dimanche value=Dimanche>	<label class=fieldToCheck for=dimanche>Dimanche</label><br>
  </fieldset>

Le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#fieldSetDays {
	column-count: 7 ;
	text-align:left ;
	width:98%
  :
}

Le résultat est 2 lignes avec un grand espace à droite...
Si quelqu'un a une idée! :-)
Bonne soirée!

**binarygirl** · 26/06/2023, 22h59

En partant du principe que la largeur d'écran est suffisante, j'essaierais d'envelopper ces checkboxes dans un div, car si on réfléchit le fieldset est une entité unique en soi, ça n'a pas de sens de le décomposer en 7 colonnes. Et donc j'appliquerais le style au div plutôt.

Personnellement, pour des raisons d'ergonomie, j'afficherais les jours en block, car ça fait moins de mouvement de poignet pour bouger la souris. Exemple: https://jsfiddle.net/#&togetherjs=HpxxerKqPI

De toute façon sur un petit écran (téléphone) et en mode responsive, le layout désiré ne pourra peut-être pas satisfait, ou satisfaisant.

**ProgElecT** · 26/06/2023, 23h02

Salut

Pour moi, ton code, sous FireFox fonctionne, sous Edge, chrome et Ie, 2 lignes,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="fr">
	<!-- Commentaires HTML -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Ici le titre dans l'onglet du navigateur</title>
		<style>
                        /* ************************************ Commentaires style ********************************************** */
#fieldSetDays {
        column-count: 7 ;
        text-align:left ;
        width:98%
  :
}               </style>
		<script>//---------------------------------------------------------------------------------------
                        'use strict'; // force la déclaration des variables
                        // ************************************ Commentaires script ********************************************** 
                        //---------------------------------------------------------------------------------------------
 
        </script>
	</head>
	<body>
		une page web, partie affichage<br>
  <fieldset id="fieldSetDays">
      <legend>Cocher les jours concernés</legend>
		<input type=checkbox id=lundi name=lundi value=Lundi> 			<label class=fieldToCheck for=lundi>Lundi</label><br>
		<input type=checkbox id=mardi name=mardi value=Mardi>			<label class=fieldToCheck for=mardi>Mardi</label><br>
		<input type=checkbox id=mercredi name=mercredi value=Mercredi>	<label class=fieldToCheck for=mercredi>Mercredi</label><br>
		<input type=checkbox id=jeudi name=jeudi value=Jeudi>			<label class=fieldToCheck for=jeudi>Jeudi</label><br>
		<input type=checkbox id=vendredi name=vendredi value=Vendredi>	<label class=fieldToCheck for=vendredi>Vendredi</label><br>
		<input type=checkbox id=samedi name=samedi value=Samedi>		<label class=fieldToCheck for=samedi>Samedi</label><br>
		<input type=checkbox id=dimanche name=dimanche value=Dimanche>	<label class=fieldToCheck for=dimanche>Dimanche</label><br>
  </fieldset>		<script>
 
                </script>
	</body>
</html>

**NoSmoking** · 28/06/2023, 11h43

Bonjour,

Envoyé par binarygirl

..., car si on réfléchit le fieldset est une entité unique en soi, ça n'a pas de sens de le décomposer en 7 colonnes.

L'utilisation d'un élément <fieldset> est tout à fait justifier mais effectivement l'utilisation d'un rendu en colonne n'est pas judicieux ici.

Mais reprenons sur la partie HTML.
Il est préférable d'encadrer les valeurs des attributs par des guillemets pour éviter tous soucis avenir.

Je partirais sur la structure suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<fieldset>
  <legend>Cocher les jours concernés</legend>
  <label><input type="checkbox" name="lundi" value="Lundi"> Lundi</label>
  <label><input type="checkbox" name="mardi" value="Mardi"> Mardi</label>
  <label><input type="checkbox" name="mercredi" value="Mercredi"> Mercredi</label>
  <label><input type="checkbox" name="jeudi" value="Jeudi"> Jeudi</label>
  <label><input type="checkbox" name="vendredi" value="Vendredi"> Vendredi</label>
  <label><input type="checkbox" name="samedi" value="Samedi"> Samedi</label>
  <label><input type="checkbox" name="dimanche" value="Dimanche"> Dimanche</label>
</fieldset>

Les <input> sont intégrés dans les <label> ce qui servira par la suite.

Sans CSS tu obtiens déjà ce que tu souhaites, magique non ?

Maintenant pour que cela reste harmonieux au redimensionnement tu as plusieurs solutions dont :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill,7em);
}

ou encore :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
fieldset label {
  display: inline-block;
  min-width: 7em;         /* à ajuster suivant la font */
}

... dans les deux cas le résultat sera le même et l'<input> resta lié au <label> en cas de redimensionnement et sera ainsi sur la même ligne que celui-ci.

Il n'y a besoin de rien d'autre pour commencer !

Impossible de créer un fieldset sur une seule ligne?

CSS

Discussions similaires

Partager

Partager