Alignement radio ou checkbox VERTICAL

**florianx2012** · 12/06/2017, 16h37

Bonjours,

Je rencontre un actuellement un problème avec l'alignement des radios et/ou checkbox.
Je m'explique : ce que je souhaite c'est les aligner horizontalement tous en gardant un alignement vertical avec les cercles à cocher.

Voici un exemple de liste : Nom : Capture.PNG
Affichages : 1012
Taille : 24,3 Ko

Nom : Capture.PNG
Affichages : 1012
Taille : 24,3 Ko

Code :

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
<!DOCTYPE html>
<html>
<body> 
 
         <input type="radio" name="gender"  <?php if (isset($gender) && $gender=="2") echo "checked";?> value="2">gerkljhre 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="3") echo "checked";?> value="3">Nherhreh
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="4") echo "checked";?> value="4">rheerh
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="5") echo "checked";?> value="5">htrhtr 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="6") echo "checked";?> value="6">jtrjr 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="7") echo "checked";?> value="7">jtrj <br>
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="8") echo "checked";?> value="8">Dattrjtrjtrjande 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="9") echo "checked";?> value="9">Dtrjjr 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="10") echo "checked";?> value="10">Tyjtrrjes
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="11") echo "checked";?> value="11">Dujtr 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="12") echo "checked";?> value="12">Typtjrtrjel  <br>
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="13") echo "checked";?> value="13">Detjrrjtttjr
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="14") echo "checked";?> value="14">Fitrjrtj
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="15") echo "checked";?> value="15">Start
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="16") echo "checked";?> value="16">Nombrgfnfance 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="17") echo "checked";?> value="17">Cgfnlgfnce <br>
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="18") echo "checked";?> value="18">Fingfnit 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="19") echo "checked";?> value="19">Cetfgnge
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="20") echo "checked";?> value="20">DagfnfngfgnM
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="21") echo "checked";?> value="21">CMgfnu 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="22") echo "checked";?> value="22">Egfnnt <br>
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="23") echo "checked";?> value="23">EnvgfnT 
         <input type="radio" name="gender" <?php if (isset($gender) && $gender=="24") echo "checked";?> value="24">Recfgnter
 
</body>
</html></div>

Comme vous le voyez cela reste basique mais je débute et j'aimerais bien savoir comment faire cela. Si il y moyen de m'éviter à faire des "margin" ou   ... ?

Invité · 12/06/2017, 18h18

Bonjour,

en CSS :

Code css :

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

1
2
3
4
input[type=radio] {
  display:inline-block;
  width:25%;
}

**NoSmoking** · 12/06/2017, 20h02

Bonjour,
Jérôme, sur ce coup tu cibles les « radioButton », il faudrait des éléments neutres, voire des <label>, pour pouvoir faire la mise en forme.

Invité · 12/06/2017, 20h34

Ah oui, oups, j'ai été trop vite...

Le CSS est valable, mais pas appliqué au bon élément.

**florianx2012** · 13/06/2017, 08h12

Bonjours ,
merci de votre réponse , je tient à m'excuse je me suis mal exprimé ce dont je souhait c'est un moyen de faire ce genre d'alignement sur chaque colonne (voir image ci-dessous).

Nom : Capture.PNG
Affichages : 944
Taille : 13,6 Ko

Nom : Capture.PNG
Affichages : 944
Taille : 13,6 Ko

**florianx2012** · 13/06/2017, 08h30

Ah ! C'est bon je vient enfin de trouver un exemple voici ce que sa donne :

Nom : Capture2.PNG
Affichages : 907
Taille : 8,8 Ko

Code :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
 
<!DOCTYPE html>
<html>
 
<style >
div {
    float: left;
    margin-right: 20px;
}
 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
 
</style>
 
<body> 
 
<div>
  <label for="tran_code" class="fixedwidth">Tran Code</label>
  <ul>
 
    <li><input type="radio" class="radioinput" name="tran_code" id="tran_code_22"
    value="22"/>
  <label for="tran_code_22" class="radiolabel">greeerhrhe</label></li>
      <li><input type="radio" class="radioinput" name="tran_code" id="tran_code_42" 
    value="42"/>
  <label for="tran_code_42" class="radiolabel">rherhe</label></li>
      <li> <input type="radio" class="radioinput" name="tran_code" id="tran_code_52" 
    value="52"/>
  <label for="tran_code_52" class="radiolabel">5hrehre2</label></li>
      <li><input type="radio" class="radioinput" name="tran_code" id="tran_code_na" 
    value="NA"/>
  <label for="tran_code_na" class="radiolabel">hreheeh</label></li>
</ul>
</div>
<div>
 
  <label for="cut_off_time" class="fixedwidth">Cherrheher</label>
    <ul>
        <li><input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_18.00" 
    value="18.00"/>
  <label for="cut_off_time_18.00" class="radiolabel">1erher</label></li>
        <li><input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_19.00" 
    value="19.00"/>
  <label for="cut_off_time_19.00" class="radiolabel">19.Cherrheher</label></li>
        <li> <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_na" 
    value="NA"/>
  <label for="cut_off_time_na" class="radiolabel">Cherrheher</label></li>
    </ul>
</div>
<div>
  <label for="remit_notify_method" class="fixedwidth">Regezgzod</label>
    <ul>
        <li><input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_n" value="N"/>
  <label for="remit_notify_method_n" class="radiolabel">Cherrheher</label></li>
        <li><input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_f" value="F"/>
  <label for="remit_notify_method_f" class="radiolabel">Cherrheher</label></li>
        <li><input type="radio" class="radioinput" name="remit_notify_method" 
    id="remit_notify_method_e" value="E"/>
  <label for="remit_notify_method_e" class="radiolabel">Cherrheher</label></li>
    </ul>
</div>
 
</body>
</html></div>

Invité · 13/06/2017, 10h08

Voici un code plus "léger" :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="radioBtns">
  <label><input type="radio" name="gender" value="1"/>Excitavit hic ardor</label>
  <label><input type="radio" name="gender" value="2"/>municipia plurima</label>
  <label><input type="radio" name="gender" value="3"/>Nec vox accusatoris</label>
  <label><input type="radio" name="gender" value="4"/>ulla licet subditicii</label>
  <label><input type="radio" name="gender" value="5"/>ergo erunt</label>
 
  <label><input type="radio" name="gender" value="6"/>Qui cum venisset</label>
  <label><input type="radio" name="gender" value="7"/>deliciis diffluentes</label>
  <label><input type="radio" name="gender" value="8"/>Osdroenam</label>
  <label><input type="radio" name="gender" value="9"/>Non ergo erunt homines</label>
  <label><input type="radio" name="gender" value="10"/>haec festinatis</label>
</div>

Code css :

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

1
2
3
4
5
6
7
8
.radioBtns {
  display:flex;
  flex-wrap:wrap;
  width:600px; /* pour test */
}
.radioBtns > label {
  flex:0 0 33.33%; /* 3 par ligne */
}

**florianx2012** · 13/06/2017, 11h06

Arf, oui effectivement beaucoup plus léger même !

Merci

Alignement radio ou checkbox VERTICAL

Positionnement en CSS

Discussions similaires

Partager

Partager