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?

InformationsquelleAutor AKor | 2011-02-17
  1. 3

    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é:

    fieldset {
  overflow: hidden;
}
label {
  padding: 2px 1em 0 0;
}
input[type=radio], input.radio {
  margin: 2px 0 0 2px;
}

    La <div class="ratingClass"> est également superflu et peut être retiré.

    InformationsquelleAutor Andrew Marshall
  2. 0

    Essayer de faire le .ratingClass récipient:

    .ratingClass { 
 float:left; 
 clear:none;
 width: 100%;
 text-align: center; 
}

    ou

    .ratingClass { 
 float:none;
 text-align: center; 
}
    • Aucun de ces travaux, le comportement reste le même.
    InformationsquelleAutor scragz
  3. 0

    Si vous pouvez faire face à une largeur fixe pour la ratingClass div vous pourriez le faire comme suit...

    .ratingClass { 
    width:300px; /* insert desired width here */
    margin:auto;
}
    • Qui marche presque, mais les boutons radio et les étiquettes sont encore flottait à gauche à l'intérieur de la div et il semble très inégale.
    InformationsquelleAutor duncmc