Boutons Radio en ligne et Centré avec Étiquettes
Je avoir la forme suivante:
<form action="post.php" method="POST">
<fieldset>
<div class="ratingClass">
<input type="radio" class="radio" name="rate" value="1" id="1"/>
<label for="1">1</label>
<input type="radio" class="radio" name="rate" value="2" id="2"/>
<label for="2">2</label>
<input type="radio" class="radio" name="rate" value="3" id="3"/>
<label for="3">3</label>
<input type="radio" class="radio" name="rate" value="4" id="4"/>
<label for="4">4</label>
<input type="radio" class="radio" name="rate" value="5" id="5"/>
<label for="5">5</label>
</div>
</fieldset>
<input type="submit" value="Rate">
</form>
De style par le code CSS suivant:
fieldset {
overflow:hidden;
}
.ratingClass {
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;
}
C'est tout à l'intérieur d'un autre div qui a text-align: center;
style.
Je me rends compte que le problème est dû à la flotte, mais si je les enlève ensuite les boutons de la radio n'est plus de l'affichage en ligne.
Comment puis-je les avoir en ligne et centrée?
Vous devez vous connecter pour publier un commentaire.
Vous n'avez pas besoin de flotter tout, ni faire les étiquettes des éléments de bloc. Le remplacement de votre CSS avec cette cause que tout soit centré:
La
<div class="ratingClass">
est également superflu et peut être retiré.Essayer de faire le .ratingClass récipient:
ou
Si vous pouvez faire face à une largeur fixe pour la
ratingClass
div vous pourriez le faire comme suit...