Déplacer HTML case à cocher à gauche de la largeur d'
Je ne peut pas utiliser de JavaScript et voudrais une réponse en seulement CSS si possbile. J'ai la case à cocher 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 code CSS suivant:
label {
float: left;
margin: 5px 0px;
}
input {
float: right;
margin: 5px 0px;
width: 200px;
}
.clear {
clear: both;
}
Ce CSS puis-je ajouter de la case pour faire apparaître sur le côté gauche de son 200px de largeur? Je vais avoir un peu de mal avec les chars (alignement vertical en particulier), mais je l'entends de la bonne pratique.
EDIT: OK, donc beaucoup de gens sont en suggérant de ne pas flotter les entrées vers la droite. Si oui, je peut aussi bien ne pas utiliser float à tous et il suffit de régler la largeur de l'étiquette et ont
après chaque ligne. Serait-ce une pratique acceptable ou suis-je tout simplement miss-à l'aide de flotteurs ici?
OriginalL'auteur Connel | 2013-01-19
Vous devez vous connecter pour publier un commentaire.
essayer , voici la démo lien
OriginalL'auteur sourcecode
Je pense que le problème que cause votre case pour être le centre de ce genre parce que vous réglez l'entrée
width:200px
donc tout ce que vous devez faire est d'ajouter lewidth:auto
à votre case par son id(autologin). Aussi, vous devez créer un div conteneur pour votre case à cocher. Voici le code HTML:et voici le CSS:
Espère que cela aide 🙂
OriginalL'auteur Visal Chhourm
Ne pas "déplacer vers la gauche de sa largeur' - laisser dicter sa propre largeur, puis ajouter le remplissage sur le côté droit si vous en avez besoin. Mais à en juger par votre conception, vous n'avez pas.
input[type=checkbox] { width: auto }
OriginalL'auteur sevenseacat
Une table est bien pour cela, puisque vous avez (fourni par l'utilisateur) des données tabulaires. Cela permettra de résoudre votre alignement vertical des questions trop.
Malheureusement, vous ne pouvez pas mettre la case sur le côté gauche de sa largeur. Personnellement, je vous recommande d'éviter le style
input
sans préciser[type=something]
. Toutefois, si vous utilisez un grand nombre de types d'entrée HTML5 commeemail
,number
,url
etc, alors vous pourriez trouver utile de style tous lesinput
un sens, puis dans l'utilisationwidth:auto
pour[type=radio]
et[type=checkbox]
OriginalL'auteur Niet the Dark Absol
Si vous êtes à l'aide du flotteur attribut, vous devez fournir une largeur à la forme de conteneurs.
OriginalL'auteur uvinod
Vous ne pouvez pas aligner ou de modifier une case à cocher de la direction, parce qu'il n'a pas d'attache, c'est juste une boîte.
Pour ce faire il suffit de le mettre dans un div et de donner la div style:
exemple:
OriginalL'auteur Mehdi Ghanavatian
Vous devez supprimer
float: right;
etwidth: 200px;
dans votreinput
déclaration de classe. Et je voudrais définir les largeurs de toutes les étiquettes (c'est à dire 200px) pour aligner la deuxième colonne.Voir jsFiddle Exemple.
OriginalL'auteur Onur Yıldırım
Définir sa largeur comme 20px, qui résout le problème. Il n'a pas besoin d'être 200px t-il?
OriginalL'auteur Dyn