入力フォームの簡単な応答性と適応性のあるデザインをhtmlで作成する方法

Question

入力フォーム（入力フォームは入力と送信HTML要素で構成する必要があります）は100％幅にする必要がありますパッディング）を使用しています。デスクトップでは、幅の50％を占め、水平方向に中央に配置する必要があります。例えば

：

desktop

tablets

Answer 1

これは動作するはずです。ここで

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    max-width: 601px; 
 
    margin: 0 auto; 
 
} 
 
.left { 
 
    overflow: hidden; 
 
    min-height: 25px; 
 
    border: 1px dashed #f0f 
 
} 
 
.right { 
 
    float: right; 
 
    width: 80px; 
 
    min-height: 25px; 
 
    border: 1px dashed #00f 
 
} 
 
input { 
 
    width: 100%; 
 
    padding: 5px; 
 
} 
 
button { 
 
    width: 100%; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="right"> 
 
    <button>Search</button> 
 
    </div> 
 
    <div class="left"> 
 
    <input type="text" /> 
 
    </div> 
 
</div>

もJSfiddleです。