Responsive Design: comment faire pour avoir de saisie de texte et un bouton de rester 100% de la largeur du parent

Question très simple... je suis piratage dès maintenant avec flottait pourcentages (mais je sais qu'il y a à être une meilleure solution) s'il vous plaît voir ma photo comme un exemple. Je veux avoir le parent de rester 100% de la largeur et de la zone de recherche automatique de la largeur qui reste toujours à côté du bouton de recherche, et je veux que le bouton de recherche pour être en mesure de croître aussi large qu'il veut (en fonction du texte à l'intérieur/padding).

Responsive Design: comment faire pour avoir de saisie de texte et un bouton de rester 100% de la largeur du parent

si vous utilisez le support de requête, points d'arrêt, plutôt que d'un design fluide, il suffit de définir les largeurs de manière explicite dans les media queries
Entendez-vous comme? jsfiddle.net/27M3Q
Pour ce cas particulier j'ai besoin de ce liquide (Nous aurons plus de 50 langues vont à l'intérieur de ce bouton de localisation de sorte qu'il doit être en mesure de sa largeur automatique avec un rembourrage)..et non, pas comme ça @Sven , c'est la méthode que j'utilise actuellement. Le problème est que le bouton est un pourcentage (je suis en train de permettre le bouton pour être aussi large que le mot à l'intérieur et laissez le champ de recherche pour être à 100% à côté du bouton).

OriginalL'auteur Oneezy | 2013-09-17

  1. 21

    Mise à JOUR (La Flexbox!)

    La bonne façon d'atteindre cet objectif est maintenant avec Flexbox!

    CSS "Flexbox" Façon (https://jsfiddle.net/1jxkyLdv/)

        /* CSS
**************************************************************************/
/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 1rem; }
h2 { margin: 2rem 0 0; }
/* Flexbox Example */
.flexbox { display: flex; }
.flexbox .stretch { flex: 1; }
.flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
.flexbox div input { padding: .5em 1em; width: 100%; }
.flexbox div button { padding: .5em 1em; white-space: nowrap; }
<!-- HTML ------------------------------------------------------------------->
<h1>Flexbox Way!</h1>
<h2>Short Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Search</button>
</div>
</section>
<h2>Long Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Super Long Word For Search Button With Flexbox!</button>
</div>
</section>

    À L'ANCIENNE

    Je méprise l'aide de tableaux ou de l'utilisation de css pour faire des divs agissent comme des tableaux), Mais ici, c'est dans l'autre sens.

    CSS "Table-Cell" Façon (http://jsfiddle.net/eUhTM/3/)

            * { box-sizing: border-box; }
section { width: 100%; display: table; padding: 1em 0 0; }
div { display: table-cell; width: 100%; }
input { width: 100%; padding: .5em 1em; }
button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }
<h1>Short Word</h1>
<section>
<div>
<input type="text" placeholder="Search..." />
</div>
<div>
<button>Search</button>
</div>
</section>

    SOLUTION


    L'astuce principale est de faire de l'article un "display: table;" et les divs à l'intérieur "display: table-cell;", vous êtes d'entrée "width: 100%" et vous êtes bouton "white-space: nowrap".

    Je suis toujours intéressé par des solutions!

    Merci à vous tous pour vos réponses grands.

    OriginalL'auteur Oneezy

  2. 5

    C'est en effet un peu difficile, surtout si vous ne connaissez pas la largeur du bouton à l'avance. Vous pourriez bien sûr aller faire un js solution, qui devrait être assez simple, mais je préfère coller à la css autant que possible.

    Je suis venu avec une solution qui fonctionne dans votre mise en page:

    <div class='searchBox'>
<input type='text' placeholder='search...'/>
<button>Search</button>
</div>
.searchBox {
position: relative;
padding: 10px;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid #999;
background: #fff;
padding: 10px;
}
button {
height: 40px;
background-color: #555;
padding: 0 10px;
border: none;
color: #fff;
position: absolute;
top: 10px;
right: 9px;
}
button:before {
content: '';
position: absolute;
display: block;
height: 40px;
top: 0px;
left: -10px;
width: 10px;
background: #fff;
border-left: 1px solid #999;
}

    et un violon: http://jsfiddle.net/VhZS5/

    Pas la solution la plus propre qui soit, mais il devrait être de la croix (moderne) navigateur (le border-box peut nécessiter quelques préfixation), est sémantiquement correct, et il n'utilise pas de tableaux.

    Noter que j'ai positionné le bouton absolue sur le dessus du champ de saisie. Ensuite, j'ai utilisé un :avant sur le bouton pour couvrir la zone d'entrée légèrement et donner l'impression d'une certaine espacement entre l'entrée et le bouton.

    Laissez-moi savoir si vous voulez m'expliquer davantage.

    Je le comprends, mais sa reste un très orthodoxe,,, (comme vous l'avez dit: l' :avant, fondamentalement, se cache l'entrée et crée un faux frontière), jsfiddle.net/VhZS5/2 compte tenu à la fois de vos réponses, je suis venu avec un bon solution: jsfiddle.net/eUhTM/3

    OriginalL'auteur Pevara

  3. 5

    Réponse correcte à partir de MrRioku dans les commentaires

    http://jsfiddle.net/eUhTM/3/

    Ma réponse originale à cette question

    http://jsfiddle.net/eUhTM/

    Ce sera probablement downvoted à l'oubli pour des raisons évidentes, mais qu'en faire:

    <table style="width:100%;">
<tr>
<td style="width:100%;">
<input type="text" placeholder="Search" style="width:100%;">
</td>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>

    J'ai utilisé du CSS pour l'affichage simplifié 🙂

    haha... je ne vais pas voter vous parce que vous avez appelé vous-même... mais de mec. . . allez!! pas de sémantique et il ne répond pas à ce que j'ai dit à tous..
    haha, je l'apprécie. J'ai joué un peu avec elle sur JSFiddle et je pense que ma mise à jour sera répondre à vos attentes (moins la sémantique) lol jsfiddle.net/eUhTM
    hey MonkeyZeus, j'ai utilisé un peu de votre technique! haha.. mais je l'ai fait avec les divisions la place.. regardez: jsfiddle.net/eUhTM/3
    C'est assez doux, apprendre quelque chose de nouveau tous les jours! J'ai été franchement trop paresseux pour jouer avec les display:table; et display:table-cell; les styles. Je vais le lien de votre JSFiddle de sorte que les gens peuvent tomber sur la bonne voie lol
    Merci! Je ne suis pas encore sûr à 100%, c'est le meilleur moyen, mais il semble que le meilleur que j'ai tombé sur mesure

    OriginalL'auteur MonkeyZeus