html - インラインレスポンシブフォーム要素

Question

インラインでレスポンシブにする必要があるテキスト入力要素と送信入力要素があります。問題は、ボタンの配置を台無しにせずにテキスト入力要素を流動的にする方法が見つからないことです。どんな助けでも大歓迎です。

これが私が使用しているhtml構造です。

<div class="search-call-to-action">
    <form action="#">
        <input type="text" name="search" placeholder="Search charities by keyword or name...">
        <input class="btn btn-primary btn-large" type="submit" name="submit" value="Search">
    </form>
</div>

ここに私が達成しようとしているもののスクリーンショットがあります。テキスト入力は流動的である必要があります。 http://i.imgur.com/Ivty5Qq.png

Answer 1

これを実現するには、メディア クエリを使用できます。次に、解決ごとにクエリを作成する必要があります。例：

@media (min-width: 320px){

div
{
    //some propererties in ems
}