radio knoppen op 1 rij maar gecentreerd
Ik zou 2 lijnen met radiokoppen op 1 lijn willen maar de totale lijn gecentreerd. Hoe kan ik dit doen.
Dit heb ik al.
Code (php)
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
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
<style>
fieldset { overflow:hidden }
.optie { float:left; clear:none; }
label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }
</style>
<fieldset>
<div class="optie">
<label>Ronden:</label>
<input type="radio" name="rounds" checked value="A"> <label for="A">Alle</label>
<input type="radio" name="rounds" value="S"> <label for="S">Gestart</label>
<input type="radio" name="rounds" value="N"> <label for="N">Niet gestart</label>
<label style="float:left; clear:both;display:block; "> </label>
</div>
</fieldset>
<fieldset>
<div class="optie">
<label >Partijen:</label>
<input type="radio" name="games" checked value="A"> <label for="A">Alle</label>
<input type="radio" name="games" value="P"> <label for="P">Gespeeld</label>
<input type="radio" name="games" value="U"> <label for="U">Uitgesteld</label>
<input type="radio" name="games" value="S"> <label for="S">Afgebroken</label>
<input type="radio" name="games" value="O"> <label for="O">Andere</label>
<label style="float:left; clear:both;display:block; "> </label>
</div>
</fieldset>
fieldset { overflow:hidden }
.optie { float:left; clear:none; }
label { float:left; clear:none; display:block; padding: 2px 1em 0 0; }
input[type=radio], input.radio { float:left; clear:none; margin: 2px 0 0 2px; }
</style>
<fieldset>
<div class="optie">
<label>Ronden:</label>
<input type="radio" name="rounds" checked value="A"> <label for="A">Alle</label>
<input type="radio" name="rounds" value="S"> <label for="S">Gestart</label>
<input type="radio" name="rounds" value="N"> <label for="N">Niet gestart</label>
<label style="float:left; clear:both;display:block; "> </label>
</div>
</fieldset>
<fieldset>
<div class="optie">
<label >Partijen:</label>
<input type="radio" name="games" checked value="A"> <label for="A">Alle</label>
<input type="radio" name="games" value="P"> <label for="P">Gespeeld</label>
<input type="radio" name="games" value="U"> <label for="U">Uitgesteld</label>
<input type="radio" name="games" value="S"> <label for="S">Afgebroken</label>
<input type="radio" name="games" value="O"> <label for="O">Andere</label>
<label style="float:left; clear:both;display:block; "> </label>
</div>
</fieldset>
Jan
http://stackoverflow.com/questions/21713819/make-radio-group-labels-display-nicely-inline-with-radio-buttons-using-pure-css
@thomas Gezien ze op 1 lijn moeten komen moet ik float left gebruiken. Extra Div werkt dus niet.
http://janr.be/sc_post-gent/kalender.html maar dan gecentreerd
/* float: left; */
/* clear: none; */
margin: 0px auto;
width: 472px; /* elke waarde groot genoeg om radio buttons te bevatten
}
Hier is een werkend voorbeeld hoe het moet.
http://jsfiddle.net/vsunbs1h/
Het is volgens mij niet nodig om inline elementen te floaten.
Als je e.e.a. eens schoonmaakt?
Om de div te kunnen centreren, moet je deze dimensies geven. Maak deze hoog / breed genoeg zodat de inhoud er in past.
Om de inhoud van de div zelf te centreren gebruik je text-align: center (dan maakt het ook niet uit hoe breed/smal je div is)
Om de div zelf te centreren ten opzichte van het omvattende element gebruik je margin: 0 auto;
Dan wordt het dus zoiets:
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<title>lalala</title>
<style type="text/css">
fieldset { }
div.optie { margin: 0 auto; width: 700px; height: 20px; text-align: center; }
label { padding: 2px 1em 0 0; }
input { margin: 2px 0 0 2px; }
</style>
</head>
<body>
<fieldset>
<div class="optie">
<label>Ronden:</label>
<input id="r1" type="radio" value="A" checked="" name="rounds">
<label for="A">Alle</label>
<input id="r2" type="radio" value="S" name="rounds">
<label for="S">Gestart</label>
<input id="r3" type="radio" value="P" name="rounds">
<label for="P">Volledig gespeeld</label>
<input id="r4" type="radio" value="N" name="rounds">
<label for="N">Nog niet gestart</label>
</div>
</fieldset>
</body>
</html>
<html>
<head>
<title>lalala</title>
<style type="text/css">
fieldset { }
div.optie { margin: 0 auto; width: 700px; height: 20px; text-align: center; }
label { padding: 2px 1em 0 0; }
input { margin: 2px 0 0 2px; }
</style>
</head>
<body>
<fieldset>
<div class="optie">
<label>Ronden:</label>
<input id="r1" type="radio" value="A" checked="" name="rounds">
<label for="A">Alle</label>
<input id="r2" type="radio" value="S" name="rounds">
<label for="S">Gestart</label>
<input id="r3" type="radio" value="P" name="rounds">
<label for="P">Volledig gespeeld</label>
<input id="r4" type="radio" value="N" name="rounds">
<label for="N">Nog niet gestart</label>
</div>
</fieldset>
</body>
</html>
Ik denk dat je op zoek bent geweest naar een te ingewikkelde oplossing :).
Gewijzigd op 04/02/2015 17:53:14 door Thomas van den Heuvel
Nu nog opkuisen:)