web-dev-qa-db-fra.com

Déplacer la case à cocher HTML sur le côté gauche de sa largeur

Je ne peux pas utiliser de JavaScript et je voudrais une réponse en CSS uniquement si possible. J'ai la case à cocher suivante dans un formulaire:

<label for="autologin">Remember Me</label>
<input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
<div class="clear"></div>

avec le CSS suivant:

label {
    float: left;
    margin: 5px 0px;
}

input {
    float: right;
    margin: 5px 0px;
    width: 200px;
}

.clear {
    clear: both;
}

Quel CSS puis-je ajouter à la case à cocher pour la faire apparaître sur le côté gauche de sa largeur de 200 pixels? J'ai un peu de mal avec les flotteurs (alignement vertical en particulier) mais j'entends que c'est la bonne pratique. chrome showing check box width

EDIT: OK donc beaucoup de gens suggèrent de ne pas faire flotter les entrées vers la droite. Si c'est le cas, je peux tout aussi bien ne pas utiliser float du tout et simplement définir la largeur de l'étiquette et avoir un
après chaque ligne. Serait-ce une pratique acceptable ou suis-je simplement en train d'utiliser des flotteurs ici?

htmlcsscheckboxcss-floatforms
17
Connel

essayez ceci, voici la démo lien

label {
    float:left;
    margin: 5px 0px;
}

input {
    // float right;
    margin: 5px 0px;
    width: 200px;

}

.clear {
    clear: both;
}
5
sourcecode

Je pense que le problème qui fait que votre case à cocher est au centre comme ça parce que vous définissez l'entrée width:200px donc tout ce que vous avez à faire est d'ajouter le width:auto à votre case à cocher par son identifiant (connexion automatique). Vous devez également créer un conteneur div pour votre case à cocher. Voici le HTML:

<label for="autologin">Remember Me</label>
<div id='check'><input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"></div>
<div class="clear"></div>

et voici le CSS:

label {
    float: left;
    margin: 5px 0px;
}

input {
    float: right;
    margin: 5px 0px;
    width: 200px;
    border:solid 1px;
}
#autologin
{
width:auto;
float:left;
}
#check
{
float:right;
width:200px;
border:solid 1px;
}

.clear {
    clear: both;
}

J'espère que cette aide :)

14
Visal Chhourm

Ne le "déplacez pas à gauche de sa largeur" - laissez-le dicter sa propre largeur, puis ajoutez un rembourrage sur le côté droit si vous en avez besoin. Mais à en juger par votre conception, vous ne le faites pas.

input[type=checkbox] { width: auto }

8
sevenseacat

Un tableau est parfait pour cela, car vous avez des données tabulaires (fournies par l'utilisateur). Cela résoudra également vos problèmes d'alignement vertical.

Malheureusement, vous ne pouvez pas mettre la case à cocher sur le côté gauche de sa largeur. Personnellement, je recommanderais d'éviter le style input sans spécifier [type=something]. Cependant, si vous utilisez un grand nombre de types d'entrée HTML5 tels que email, number, url etc., il peut être utile de styliser tous les input un manière, puis utilisez width:auto pour [type=radio] et [type=checkbox]

0
Niet the Dark Absol

Si vous utilisez des moyens d'attribut float, vous devez fournir une largeur au conteneur de formulaire.

0
uvinod

Vous devez supprimer float: right; et width: 200px; dans votre déclaration de classe input. Et je définirais des largeurs pour toutes les étiquettes (c'est-à-dire 200 px) pour aligner la deuxième colonne.

label {
    float: left;
    margin: 5px 0px;
    width: 200px; 
}

input {
    /*float: left;*/   /* This will also work. */
    margin: 5px 0px;
}

.clear {
    clear: both;
}

Voir Exemple jsFiddle.

0
Onur Yıldırım

Vous ne pouvez pas aligner ou modifier la direction d'une case à cocher, car elle n'a pas de pièce jointe, c'est juste une boîte.

Pour ce faire, mettez-le simplement dans un div et donnez-lui ce style:

.checkDIV
{
    text-align:left;
}

exemple:

<div align="center" class="checkDIV">
    <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1">
</div>
0
Mehdi Ghanavatian