J'essaie d'avoir une partie d'une étiquette pour un champ de saisie de texte soit parfaitement alignée.
ici est un exemple de violon. Mon objectif est d'avoir le texte "haut à droite" être en haut à droite de l'entrée. J'ai essayé d'ajouter le J'ai essayé d'ajouter droit de droite-alignement CSS Helper, mais cela n'a rien fait. style = "flotteur:" " qui < a href = "https://jsfiddle.net/ml19ybnt/1/" rel = "nfollow noreferrer"> genre de travaux
est là un moyen de l'obtenir parfaitement aligné contre le bord droit du champ de saisie?
5 Réponses :
Le problème avec ceci est que j'ai de nombreuses entrées de texte et certaines d'entre elles ont du texte plus long de l'étiquette, de sorte que 25px peut être bien pour certains mais peut être trop pour les autres. Je cherchais une solution qui l'alignera toujours à droite
25px de la droite, donc la largeur de l'étiquette n'a pas d'importance /
J'ai ajouté un exemple
@Sambattat Lorsque j'exécute votre code de code, il jette une erreur. Peut être un script et des balises de liaison ne sont pas nécessaires. Je ne suis pas sûr cependant.
J'ai aussi inclus un lien Jsfiddle
Vous pouvez réduire la largeur de l'étiquette à 91% lorsque vous utilisez la position absolue (haut, gauche) pour ajuster son emplacement et ajouter du flotteur directement à la portée
input[type=text].validate+label {
width: 91%;
}
.right-align {
float: right;
}
Vous pouvez simplement ajouter une position absolue à une classe et attribuer cette classe à l'élément que vous souhaitez aligner sur le droit de l'entrée. Vous n'avez pas besoin d'ajuster autre chose.
.right-align {
Position: absolu;
}
Il y a beaucoup de CSS Crazy CSS lorsque je l'inspecte avec Chrome. Où avez-vous eu ce CSS? Pour une raison quelconque, votre étiquette est positionnée 10,5 px à droite qui le jette. Essayez ce CSS ...
.right-align {
float: right;
}
label {
left: 0 !important;
right: 0 !important;
}
.input-field{
padding: 0 !important;
}
Je ne suis vraiment pas un fan de surutilisation de moins sale (pas de position, pire option) Fix: < / p> https://jsfiddle.net/f4036zmg/ Pourquoi cela fonctionne: l'étiquette est positionnée absolue, elle ne prend donc pas en compte le remplissage de son élément de conteneur ( Faites-moi savoir si vous voulez que le tout fonctionne sans position, c'est assez facile. (Cependant, il ressemble à matinerize.min.css fait le travail pour vous, de manière très laid). semi-propre (pas de position, option OK) Fix: Ici, nous remplaçons matériquerise.min.css (peut-être que ce n'est pas une bonne option, je ne sais pas). Nous réinitialisons la largeur https://jsfiddle.net/gl7fhx2q/ Clean Fix: changements HTML requis: css: https://jsfiddle.net/7bw2zghr/ Matérialisateur de remplacement.min.css à nouveau, mais ne devrait pas causer de problèmes pour d'autres conceptions. Réinitialiser le dos gauche à la position correcte Position: absolu pour résoudre des problèmes. L'utilisation de cela peut causer des problèmes de performances car le navigateur doit créer Un nouvel élément de pile et rendre à l'envers . Surtout parce que c'est déjà dans un absolu, vous aurez donc 3 éléments d'empilement, quand vraiment pour le faire, aucun n'est nécessaire . .75rem ). Pour obtenir le côté gauche aligné correctement, il a à gauche: .75rem ce qui signifie que le droit est maintenant 1.5rem à droite car il est largeur: 100% < / code>. Le rembourrage simplement l'étiquette forcera le flotteur à se déplacer dans la zone rembourrée d'étiquettes.
: auto de sorte que le droit fonctionne fonctionnera et, comme avant, nous devrions être cavaliers pour ce .75rem
à gauche: 0 et ajouter du remplissage comme l'entrée Rembourrage: 0.75rem . Maintenant, l'étiquette correspond correctement à ses frères et sœurs. Changer l'affichage de l'étiquette sur un Flex Conteneur et enveloppez les deux textes afin qu'ils soient des éléments flexibles. Définissez les éléments pour se développer proportionnellement, puis réglez correctement le texte de l'élément Flex à droite.
Ne recommande pas de faire Padding-Droite: 1.50rem; En appuyant sur l'étiquette en dehors de son parent et peut causer d'autres problèmes de rendu, votre deuxième option est bien meilleure. N'hésitez pas à utiliser ma suggestion que j'ai posté dans mes commentaires à la question.
@LGSON CALC À mon avis est un dernier recours (comme ! Important ). Étant donné que l'étiquette est absolument positionnée, il ne peut pas causer de problèmes de rendu avec d'autres éléments (sauf s'il existe d'autres éléments à l'intérieur du parent DIV qui sont la position absolue, l'OP ne nous a pas dit).
Est-ce que vous plaisantez? .. vous signifiez sérieusement que vous êtes égal calc avec ! important
Et oui, c'est exactement pourquoi, quand "l'OP ne nous a pas dit" ... et l'élément absolu, lorsqu'il a débordé de son parent, peut également affecter par exemple. une zone cliquable en dehors du parent
De plus, si nécessaire pour utiliser Flexbox, tout ce qui est nécessaire, c'est de faire le étiquette un conteneur flex et une marge automatique gauche sur son span . Et Remarque, votre échantillon Flexbox n'est pas valide, une étiquette ne peut pas avoir un div en tant qu'enfant.
@Lgson Calc peut être pire que! IMPORTANT car il doit être calculé à chaque fois, et en fonction de ce que cela calculera contre (surtout EM) des problèmes (mineurs) de performance. Donc, avoir 10 ou 100 ans de ces causes causent réellement des problèmes mondiaux réels dans le rendu et la peinture ... ! Important ne peut pas causer cela.
Vous devez ajuster la largeur de votre pour correspondre à son rembourrage des parents de
.75em de chaque côté, par exemple.largeur: calc (100% - 1.5rem) . Avec ce changement, un droit de flotteur fonctionnera.Voici un échantillon de travail de ce: jsfiddle.net/ml19ybnt/23 ... Assurez-vous simplement La spécificité de la règle CSS correspond à la règle intégrée (ou vous devez ajouter
! Important , que je ne recommande pas)