Comment puis-je mettre un élément d'entrée sur la même ligne que son étiquette?
Je voudrais mettre un label
et un input[type=text]
sur la même ligne, et je voudrais, pour input
's largeur pour remplir la largeur restante de l'élément conteneur, quelle que soit la longueur du texte de l'étiquette (voir la première image).
J'ai essayé d'utiliser width: auto;
pour la input
, mais il semble avoir une largeur statique. J'ai aussi essayé width: 100%;
, mais qui se déplace le input
à une nouvelle ligne (voir la deuxième image).
Comment puis-je réaliser cela à l'aide de CSS?
- Que penser de l'utilisation de JavaScript? Est-ce la bonne solution?
- Je suis venu ici à la recherche d'un remplaçant pour mon javascript solution.
- cheers, vous avez donc trouvé un?
Vous devez vous connecter pour publier un commentaire.
C'est possible sans JavaScript, voir: http://jsfiddle.net/Khmhk/
Cela fonctionne dans IE7+, et tous les navigateurs modernes.
HTML:
CSS:
La raison pour laquelle
overflow: hidden
est donc comme par magie utile dans cette instance est expliqué ici.display: table-cell
est une autre option, voir: http://jsfiddle.net/Khmhk/1/Ce fonctionne avec IE8+ et tous les navigateurs modernes:
HTML:
CSS:
overflow: hidden
suggestion est pure, bloc de mise en forme contexte la sorcellerie. Je vous aime. Je ne vais jamais comprendre pleinement CSSoverflow: hidden
la magie est à la baisse, mais les générations futures puissent le voir ici sur les ArchivesQui fonctionne encore pour moi, mais ftr c'est de cette façon Bootstrap 3 (merci à @morten.c est la réponse "Bootstrap pleine largeur d'entrée texte dans inline-forme"). Ne sais pas si c'est plus difficile à casser que @thirtydot, ou quoi que ce soit. Mais ici, il est, et voici un violon qui donne également un exemple de base de la façon de traiter avec un étroit écran de point de rupture.
HTML:
CSS: