0

Zurb's Foundation と協力してレスポンシブ Web サイトを作成していますが、検索フォームをレスポンシブにしようとすると問題が発生しました。

入力フィールドがあり、その右側に<button>フォームを送信します。ボタンには幅 70px の画像があります。したがって、入力フィールドに残りの 100% を占めるようにする必要があります。

私はoverflow: hidden;あまり運がない方法を見てみました。パーセンテージを使用してみましたが、モバイル サイズにすると、サイズ変更 (基盤の一部) のためにボタン イメージが非常に小さくなります。

ここに私が持っているものがあります:

HTML:

<div class="form-search">
    <input id="search" type="text" class="input-text" />
    <button type="submit" class="button expand postfix">
        <img src="images/search-submit.png" />
    </button>
</div>

CSS:

div.form-search { overflow: hidden; }
div.form-search input { float:left; overflow: hidden; background: #ebebe7; border: none; padding: 1em; outline: none; }
div.form-search button { display: block; background: none; border: none; padding: 0; margin: 0; }
4

1 に答える 1

3

次を使用して修正しました：

HTML:

<div class="form-search">
    <button type="submit" class="button expand postfix">
        <img src="images/search-submit.png" />
    </button>
    <div>
        <input id="search" type="text" name="search" class="input-text" />
    </div>
</div>

CSS:

div.form-search div { overflow: hidden; }
div.form-search div input { width: 100%; background: #ebebe7; border: none; padding:  1em;  outline: none; }
div.form-search button { float: right; width: emCalc(70); background: none; border: none; padding: 0; margin: 0; }

これにより、送信ボタンが div の右側にフロートされます。これは、幅とオーバーフローが設定されているためです。入力の親 div では、残りのスペースを 100% 幅で埋めます。

于 2013-09-26T12:43:59.820 に答える