16

非常に単純な質問...私は現在、浮動小数点数でハッキングしています（しかし、より良い解決策が必要であることはわかっています）例として私の写真を見てください。親の幅を 100% のままにし、検索ボックスを常に検索ボタンの横に自動幅にして、検索ボタンを必要なだけ大きくできるようにしたい (テキストによってはその内部/パディング)。

ここに画像の説明を入力

4

3 に答える 3

25

更新 (フレックスボックス方式!)

これを実現する適切な方法は、Flexbox を使用することです!

CSS「フレックスボックス」方式( 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>


オールドウェイ

私は、テーブルを使用したり、CSS を使用して div をテーブルのように機能させたりすることを軽蔑します)。しかし、別の方法があります。

CSS「テーブルセル」方式( 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>



解決策
主なトリックは、セクションを「display: table;」にすることです。「display: table-cell;」内の div には、「width: 100%」と入力し、「white-space: nowrap」ボタンを押します。



私はまだ解決策に興味があります！

素晴らしい回答をありがとうございました。

于 2013-09-17T21:58:28.563 に答える
5

コメントのRiokuさんからの正解

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

私の元の答え

http://jsfiddle.net/eUhTM/

これはおそらく明らかな理由で忘却に反対票を投じられるでしょうが、これを行うのはどうですか:

<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>

簡単に表示するためにインラインCSSを使用しました:)

于 2013-09-17T20:49:00.373 に答える
5

特にボタンの幅が事前にわからない場合、これは確かに少し注意が必要です。もちろん、かなり単純な js ソリューションを使用することもできますが、私は可能な限り css に固執することを好みます。

あなたのレイアウトで機能するソリューションを思いつきました：

<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;
    }

フィドル: http://jsfiddle.net/VhZS5/

これまでで最もクリーンなソリューションではありませんが、クロス (モダン) ブラウザー (ボーダーボックスにはプレフィックスが必要な場合があります) である必要があり、意味的に正しく、テーブルを使用しません。

入力フィールドの上に絶対ボタンを配置したことに注意してください。次に、ボタンに :before を使用して、入力ボックスをわずかに覆い隠し、入力とボタンの間にスペースがあるような印象を与えました。

さらに説明が必要な場合はお知らせください。

于 2013-09-17T21:03:31.350 に答える