web-dev-qa-db-fra.com

Responsive Design: comment faire pour que la saisie de texte et le bouton restent à 100% de la largeur du parent

Question très simple ... Je le pirate en ce moment avec des pourcentages flottants (mais je sais qu'il doit y avoir une meilleure solution) s'il vous plaît voir ma photo comme exemple pour passer. Je veux que le parent reste à 100% en largeur et que la zone de recherche soit une largeur automatique qui reste toujours à côté du bouton de recherche, et je veux que le bouton de recherche puisse s'agrandir autant qu'il le souhaite (selon le texte à l'intérieur/rembourrage).

enter image description here

htmlcss3responsive-design
16
Oneezy

MISE À JOUR (The Flexbox Way!)

La bonne façon d'y parvenir maintenant est avec Flexbox!

Méthode CSS "Flexbox" ( 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>


LA VIEILLE VOIE

Je méprise l'utilisation des tables ou l'utilisation de CSS pour que les divs agissent comme des tables), mais voici l'autre façon.

Chemin CSS "Table-Cell" ( 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 la section un "affichage: tableau;" et les div à l'intérieur de "display: table-cell;", vous entrez "width: 100%" et vous êtes le bouton "white-space: nowrap".



Je suis toujours intéressé par les solutions!

Merci à tous pour vos excellentes réponses.

22
Oneezy

C'est en effet un peu délicat, surtout si vous ne connaissez pas la largeur du bouton à l'avance. Vous pouvez bien sûr opter pour une solution js, qui devrait être assez simple, mais je préfère m'en tenir au CSS autant que possible.

J'ai trouvé 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/

Ce n'est pas la solution la plus propre jamais, mais elle devrait être un navigateur croisé (moderne) (la zone de bordure peut nécessiter un préfixe), est sémantiquement correcte et n'utilise pas de tableaux.

Notez que j'ai positionné le bouton absolu en haut du champ de saisie. Ensuite, j'ai utilisé un: avant sur le bouton pour couvrir légèrement la zone de saisie et donner l'impression d'un certain espacement entre l'entrée et le bouton.

Faites-moi savoir si vous voulez que j'explique davantage.

5
Pevara

Bonne réponse de MrRioku dans les commentaires

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

Ma réponse originale

http://jsfiddle.net/eUhTM/

Cela sera probablement sous-estimé pour l'oubli pour des raisons évidentes, mais qu'en est-il de cela:

<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é le CSS en ligne pour une visualisation simplifiée :)

5
MonkeyZeus