Disposition checkbox et radio

**Ziltoid** · 27/10/2007, 01h51

Bonjour à tous.

J'ai un formulaire contenant (entre autre) un passage avec une vingtaine de checkbox.

http://img151.imageshack.us/my.php?i...mulaireme3.jpg

Je voudrais que toutes les checkbox soient alignées verticalement (comme des colonnes quoi, comme pour Animaux/Danse/Jardinage/Photographie/Voyages).

Un "width=200px;" ne fait rien, que ça soit sur les inputs ou les labels...
Sur tous les tutos que j'ai vu à chaque fois les checkbox étaient réparties une par ligne.

Merci d'avance pour vos réponses.

**spitou_77** · 27/10/2007, 09h38

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
73
74
75
76
77
78
79
80
81
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
        <title>Tests</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css" media="screen">
			fieldset { padding: 0.5em 0.5em 1em 0.5em; }		
			.column { float: left; }
			.column label {
			    float: left;
			    width: 100%;
			    position: relative;
			}
			.nbColumn1 { width: 100%; }
			.nbColumn2 { width: 50%; }
			.nbColumn3 { width: 33.33%; }
			.nbColumn4 { width: 25%; }
			.nbColumn5 { width: 20%; }
		</style>
	</head>
	<body>
		<fieldset>	
			<div class="column nbColumn5">
	             <label for="hobby_1">
					<input type="checkbox" class="checkbox" id="hobby_1" name="hobby[]" value="Animaux"/>
	                 Animaux<br/>
				 </label> 
	             <label for="hobby_6">
					<input type="checkbox" class="checkbox" id="hobby_6" name="hobby[]" value="Ecriture"/>
	                 Ecriture<br/>
				 </label> 
	             <label for="hobby_11">
					<input type="checkbox" class="checkbox" id="hobby_11" name="hobby[]" value="Jeux"/>
	                 Jeux<br/>
				 </label> 				 
			</div>	 
			<div class="column nbColumn5">
	             <label for="hobby_2">
					<input type="checkbox" class="checkbox" id="hobby_2" name="hobby[]" value="Ballade"/>
	                 Ballade<br/>
				 </label> 		
	             <label for="hobby_7">
					<input type="checkbox" class="checkbox" id="hobby_7" name="hobby[]" value="Exposition"/>
	                 Exposition<br/>
				 </label> 				 
	       </div>
			<div class="column nbColumn5">
	             <label for="hobby_3">
					<input type="checkbox" class="checkbox" id="hobby_3" name="hobby[]" value="Cinéma"/>
	                 Cinéma<br/>
				 </label> 	
	             <label for="hobby_8">
					<input type="checkbox" class="checkbox" id="hobby_8" name="hobby[]" value="Informatique"/>
	                 Informatique<br/>
				 </label> 				 
	       </div>	
			<div class="column nbColumn5">
	             <label for="hobby_4">
					<input type="checkbox" class="checkbox" id="hobby_4" name="hobby[]" value="Cuisine"/>
	                 Cuisine<br/>
				 </label> 
	             <label for="hobby_9">
					<input type="checkbox" class="checkbox" id="hobby_9" name="hobby[]" value="Internet"/>
	                 Internet<br/>
				 </label> 				 
	       </div>	
			<div class="column nbColumn5">
	             <label for="hobby_5">
					<input type="checkbox" class="checkbox" id="hobby_5" name="hobby[]" value="Danse"/>
	                 Danse<br/>
				 </label> 
	             <label for="hobby_10">
					<input type="checkbox" class="checkbox" id="hobby_10" name="hobby[]" value="Jardinage"/>
	                 Jardinage<br/>
				 </label> 				 
	       </div>		   
		</fieldset>		   
	</body>
</html>