Lutte avec un champ de recherche extensible automatique à l'aide de CSS

Question

Depuis quelques heures, j'ai du mal à étendre ce champ de recherche avec le navigateur (comme amazon.com).

J'ai essayé diverses choses trouvées sur Google, telles que rendre le champ de saisie ou le conteneur parent à 100%, le débordement ... etc, mais je n'arrive pas à l'obtenir: /

J'ai également essayé de faire flotter les catégories vers la droite, et cela a changé de place avec le bouton d'envoi.

Une idée de l'endroit où je me trompe?

http://jsfiddle.net/SkinnyGeek1010/RzHWA/

Answer 1

Cela peut être une situation où vous pourriez avoir besoin d'utiliser une table, si vous souhaitez que le travail soit fait.À l'aide d'un formulaire contenant un tableau à une ligne, divisez le contenu en trois cellules, avec le champ de saisie dans la cellule du milieu.Définissez la largeur du tableau et la largeur de la cellule du milieu sur 100% et la largeur du champ de saisie sur quelque chose comme 98% (essayez 100% et vous verrez pourquoi il doit être légèrement réduit).Oh, et évitez les sauts de ligne à l'intérieur des cellules.

Une démonstration sommaire du concept: http://jsfiddle.net/yucca42/hyEPu/

Si la police de votre entreprise interdit la mise en page des tableaux, essayez de leur dire qu'il s'agit d'un tableau de données.À défaut, vous pouvez simuler la table en utilisant display: table etc. en CSS (bien que cela devienne plus compliqué et échouera sur les anciennes versions d'IE).