Mettre d'envoi d'entrée sur la même ligne que l'entrée de la boîte de
C'est sans doute simple, mais je ne sais pas comment le faire. Actuellement, avec ce code, le bouton "rechercher" se trouve sur la ligne en dessous de l'entrée "emplacement". Comment puis-je obtenir de lui de s'asseoir sur la même ligne à droite comme la plupart des boîtes de recherche de travail?
HTML
<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" />
</div>
CSS
field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
Lien
http://jsfiddle.net/VL3Dj/
il serait génial si vous mettez ce code dans jsbin.com ou jsfiddle.net alors que d'autres peuvent commencer à corriger votre code de droit en lieu et place
Ok! jsfiddle.net/VL3Dj
Ok! jsfiddle.net/VL3Dj
OriginalL'auteur James Willson | 2012-10-12
Vous devez vous connecter pour publier un commentaire.
Si vous voulez que votre zone de texte pour être
100% width
et un bouton à côté de lui, vous pouvez le faire comme ceci : Mon ViolonVous bienvenue 🙂
J'ai eu du mal avec cela pendant des années. Quelqu'un peut-il expliquer pourquoi le overflow: hidden, il fonctionne et pourquoi il ne fonctionne pas sans elle?
l'ajout de overflow:hidden (ou toute autre valeur en plus visible) crée un nouveau Bloc de mise en forme Contexte. Cela change la façon dont le div calcule la largeur de considérer la flottait élément avant.
OriginalL'auteur Mr. Alien
............Démo
Salut maintenant ajouter cette css
Démonstration en direct
OriginalL'auteur Rohit Azad
C'est parce que votre champ d'entrée est fixé à 100% de largeur, ne laissant aucun espace pour le bouton à côté d'elle.
Ici est une version fixe: http://jsfiddle.net/ThfES/1/
Peut-être qu'il n' - mine est l'une des dizaines de suggestions. Si il préfère votre solution, alors je suis sûr qu'il va le marquer comme réponse.
Ouais je veux que le champ de texte à 100%, désolé.
Pas besoin de s'excuser. Il y a quelques idées qui vont travailler pour vous.
OriginalL'auteur Alan Shortis
Vous avez seulement besoin de connaître la largeur du bouton pour qu'il fonctionne. Alors en gros, vous donnent entrée complète de la largeur et de la position absolue le bouton vers la droite. Le rembourrage est donc pas de texte se trouve derrière le bouton:
Comme pour le CSS:
OriginalL'auteur Dan H
Essayez de suivre, largeur:50%
OriginalL'auteur Kaf
Vous devez
float
les éléments de bloc, afin qu'ils apparaissent côte à côte, pour ainsi dire.inline
éléments comme<a>
et<span>
le faire par défaut. En savoir plus sur le modèle de Boîte CSS.Votre solution: http://jsfiddle.net/HBJtT/
EDIT: en Gardant
input
champ100%
de large.Solution potentielle: http://jsfiddle.net/3TZL8/
Je ne suis pas pour cette solution, si votre motivation pour garder le champ de saisie de texte
100%
est la largeur, de sorte que le bouton et le champ rechercher "en toute transparence", vous devez utiliser une grille ou un framework d'INTERFACE. J'ai comme principe de base, une solution possible peut être vu ici: http://foundation.zurb.com/docs/forms.php (faites Défiler jusqu'à "l'Entrée avec un postfix action" par exemple)Veuillez voir le modifier. Je ne suis pas sûr de savoir pourquoi vous voulez garder l'élément d'entrée de 100% de largeur, pouvez-vous préciser? Merci.
OriginalL'auteur Gaurav Dadhania
Vous pouvez faire quelque chose comme ceci ( qui a travaillé dans mon cas ):
Voici une démo: http://jsfiddle.net/gn3qx6w6/1/
OriginalL'auteur TheOne LuKcian