radio knoppen op 1 rij maar gecentreerd

Door Jan R op 04-02-2015 09:38

1.506 views

Hoi,

Ik zou 2 lijnen met radiokoppen op 1 lijn willen maar de totale lijn gecentreerd. Hoe kan ik dit doen.
Dit heb ik al.


<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; ">&nbsp;</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; ">&nbsp;</label>
	</div>
</fieldset>

Jan

Onbekende gebruiker

04-02-2015 10:57

Zoiets als dit?
http://stackoverflow.com/questions/21713819/make-radio-group-labels-display-nicely-inline-with-radio-buttons-using-pure-css

Thomas van den Heuvel

04-02-2015 11:46

Of een extra container (div) om je radio buttons wellicht.

Jan R

04-02-2015 15:31

@Rickerd dat is op 2 lijnen :)
@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

Jan de Laet

04-02-2015 17:41

.optie {
/* float: left; */
/* clear: none; */
margin: 0px auto;
width: 472px; /* elke waarde groot genoeg om radio buttons te bevatten
}

Onbekende gebruiker

04-02-2015 17:43

@jan r Het was een duwtje in de juiste richting. Helaas niet hard genoeg geduwd denk ik.
Hier is een werkend voorbeeld hoe het moet.

http://jsfiddle.net/vsunbs1h/

Thomas van den Heuvel

04-02-2015 17:50 gewijzigd op 04-02-2015 17:53

EDIT: wat Jan de Laet zei, maar dan een "verbose" versie:

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:

<!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>

Ik denk dat je op zoek bent geweest naar een te ingewikkelde oplossing :).

Jan R

05-02-2015 07:48

Bedankt. Nu is het gelukt. ook voor de ronden zelf :)

Nu nog opkuisen:)

Reageren

Inloggen om te reageren