Aligné à gauche de l'Étiquette - Aligner à Droite Sélectionner l'Élément (CSS)
J'ai un formulaire de mise en page que je veux afficher l'étiquette aligné à gauche et le contrôle de formulaire aligné à droite. J'ai essayé de le faire fonctionner à l'aide d'un float:right sur le formulaire de contrôle (dans ce cas ), puis en appliquant la clearfix classe, mais clearfix ne semble pas fonctionner sur ma boîte de sélection.
Est-il quelque chose de mal ici ou est-clearfix pas prévu pour fonctionner sur un élément select?
Lorsque je fais ceci, cependant, la boîte de sélection s'étend toujours à l'extérieur de la partie inférieure de la div contenant.
Mon Code:
<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
select.clearfix {
zoom: 1;
}
</style>
<![endif]-->
<div id="triage">
<div id="category-select">
Category:
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency
<option value="B">B - Urgent
<option value="C">C - ASAP
<option value="D" selected>D - Standard
</select>
</div>
</div>
Si vous souhaitez que la zone de sélection pour être à l'extérieur de la boîte avec de la frontière, alors vous devez placer la balise select à l'extérieur de la "catégorie-sélectionnez" div.
OriginalL'auteur Barbs | 2011-12-07
Vous devez vous connecter pour publier un commentaire.
Si le
select
élément est le plus grand chose, pourquoi ne pas flotter le label? Vous pouvez également profiter de l'occasion pour en faire réellement une étiquette au lieu de juste un peu de texte dans undiv
. Voici le CSS:Voici le code HTML:
Voici la démo.
OriginalL'auteur robertc
Puisque vous êtes flottant de l'élément select, cela n'affectera pas la hauteur de la div contenant plus. Essayer d'ajouter un peu de rembourrage à l'élément contenant: http://jsfiddle.net/LZVhN/1/ (également ajouté quelques positionnement relatif pour le sélectionner)
OriginalL'auteur ptriek