応答している間に入力フィールドを1行に取得

Question

私はウェブサイト、電子メール、および「提出」を使って簡単なフォームを作成しようとしています。

私はここで同様の質問をしてきましたが、テーブルやフレックスを使って1行にすべてのフィールドを作成する解決策がいくつか見つかりましたが、いくつかの書式設定（中央揃えではありません）そして、応答性の問題：/

ここでは私のフォームのHTMLです：

<div class="seoaudit"> 
 
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Website URL 
 
    [url* url-613]</label></div> 
 
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Email 
 
    [email* your-email] </label></div> 
 

 

 
<div class="seoinput"> 
 
<br/> 
 
[submit "Send Request!"]</div> 
 
</div>

これは私が肝炎現在のCSSです

：eは：それはそれに影響を与え

<div class="seoaudit"> 
 
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Website URL 
 
    [url* url-613]</label></div> 
 
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Email 
 
    [email* your-email] </label></div> 
 

 

 
<div class="seoinput"> 
 
<br/> 
 
[submit "Send Request!"]</div> 
 
</div>

私も（これは上に構築されたものである）私のコンタクトフォーム7のフォームのCSSでこれを持っていますが、私はわかりません

.wpcf7-form-style { 
 
    margin: 0 auto; 
 
    float: none; 
 
    display: block; 
 
} 
 

 
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"] { 
 
margin: 9px auto 0 !important; 
 
    }

だから、私はデスクトップ上でそれをするだけでどのように見える：Dしかし、あなたがタブレットに取得する場合、またはモバイルではフォームフィールドだけをカットし、モバイルで見ることができるのはURL入力の一部です！ああ。私はメディアの問い合わせが動いているのだろうか？または、フォームdiv全体に適用できるものがあれば、タブレットとモバイルの別の行に移動させることができますか？私はこれも一緒に遊んでみました：http://jsfiddle.net/XAkXg/

運がありません。どんな提案も大歓迎です！

Answer 1

メディアクエリを使用して、小さな画面で必要なレイアウトを実現します。 例：

@media (min-width:480px){ 
    your input styles here... 
}