入力フィールドがブラウザで適切にサイズ変更されない

ブラウザのサイズを変更すると、入力フィールドのサイズが適切に調整されず、中央で重なり合って歪んでメディアスクリプトが実行され、すべてが100％に設定されます。テキスト領域の幅100％はフォームと一致しません。このお問い合わせフォームを扱う排気されている、と私もそれが笑まだ電子メールを送信するために取得する方法を見つけ出すためにしようとしていない...入力フィールドがブラウザで適切にサイズ変更されない

https://p.w3layouts.com/demos_new/template_demo/01-07-2017/my_design-demo_Free/528613908/web/index.html

ボーナス質問：なぜする入力を持っていませんスパンに包まれているか、親divsの境界を完全に無視していますか？

リクエストごとに、ここにはJSFIDDLEスクリプトがあります。 https://jsfiddle.net/LxLux35m/1/

.Block { 
 
    \t width: 100%; 
 
    \t background-color: #edeeef; 
 
    \t padding: 50px 0; 
 
    } 
 
    
 
    .Block:nth-of-type(odd) { 
 
    \t background-color: #ffffff; 
 
    } 
 
    
 
    .Block:After { 
 
    \t content: ''; 
 
    \t display: block; 
 
    \t clear: both; 
 
    \t overflow: hidden; 
 
    \t Zoom: 1; 
 
    \t height: 0; 
 
    } 
 
    
 
    .BlockWrapper { 
 
    \t text-align: center; 
 
    \t Max-Width: 60%; 
 
    \t margin: 0 auto; 
 
    } 
 
    
 
    .BlockSizer1, .BlockSizer2, .BlockSizer3 { 
 
    \t float: left; 
 
    \t text-align: left; 
 
    } 
 
    
 
    .BlockSizer1 { 
 
    \t Width: 100%; 
 
    } 
 
    
 
    .BlockSizer2 { 
 
    \t width: 49%; 
 
    } 
 
    
 
    .BlockSizer3 { 
 
    \t width: 33%; 
 
    } 
 
    #ContactForm { 
 
    \t Padding: 5px; 
 
    } 
 
    
 
    #ContactForm span { 
 
    \t width: 49%; 
 
    \t padding: 5px 0 0 0; 
 
    \t display: inline-block; 
 
    } 
 
    
 
    #ContactForm > .textarea { 
 
    \t width: 100%; 
 
    } 
 
    
 
    #ContactForm > .textarea textarea { 
 
    \t width: 98%; 
 
    \t Min-Height: 200px; 
 
    \t margin: 1em 0 1em 0em; 
 
    } 
 
    
 
    #ContactForm input { 
 
    \t width: 92%; 
 
    \t color: #999999; 
 
    \t outline: none; 
 
    \t padding: 10px; 
 
    \t Border: 1px solid #a0a0a0; 
 
    } 
 
    
 
    .ContactFormButton, .ContactFormButton input { 
 
    \t Width: 100% !important; 
 
    } 
 
    
 
    @Media screen and (max-width: 1000px) { 
 
    \t div.ContactForm, div.ContactFormRight { 
 
    \t \t width: 100%; 
 
    \t \t Margin: 5px 0; 
 
    \t \t float: none; 
 
    \t \t padding: 0; 
 
    \t } 
 
    } 
 
    
 
    textarea.ContactForm { 
 
    \t width: 100%; 
 
    \t padding: 10px; 
 
    \t Min-Height: 200px; 
 
    }

<div class="Block"> 
 
\t \t <div class="BlockWrapper"> 
 
\t \t \t <div class="BlockSizer2"> 
 
\t \t \t \t <form ID="ContactForm" action="#" method="post"> 
 
\t \t \t \t \t <h1>Contact Me</h1> 
 
\t \t \t \t \t <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p> 
 
\t \t \t \t \t <span><input type="text" name="Name" placeholder="Name" required="" /></span> 
 
\t \t \t \t \t <span class="ContactFormRight"><input class="" type="text" name="Subject" placeholder="Company Name" required="" /></span> 
 
\t \t \t \t \t <span><input type="email" name="Email" placeholder="Email" required="" /></span> 
 
\t \t \t \t \t <span class="ContactFormRight"><input type="text" name="Phone" placeholder="Phone" required="" /></span> 
 
\t \t \t \t \t <span class="textarea"><textarea name="Message" placeholder="Message..." required></textarea></span> 
 
\t \t \t \t \t <span class="ContactFormButton"><input type="submit" value="Submit"></span> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t \t \t <div class="BlockSizer2"> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

出典

2017-07-25 user1451070

注：あなたのCSSプロパティはすべて小文字でなければなりません！ –

このような問題がある場合は、コードをjsfiddleに追加するのが最善でしょう。 https://jsfiddle.net/ – user3738936

'#ContactForm span'を' padding：5px 10px 0px 0px; 'と' width：45％; ' – PiLHA

チェックこのコードは、ちょうどあなたのメディアクエリを更新

<style> 
 
    .Block { 
 
     width: 100%; 
 
     background-color: #edeeef; 
 
     padding: 50px 0; 
 
    } 
 

 
    .Block:nth-of-type(odd) { 
 
     background-color: #ffffff; 
 
    } 
 

 
    .Block:After { 
 
     content: ''; 
 
     display: block; 
 
     clear: both; 
 
     overflow: hidden; 
 
     Zoom: 1; 
 
     height: 0; 
 
    } 
 

 
    .BlockWrapper { 
 
     text-align: center; 
 
     Max-Width: 60%; 
 
     margin: 0 auto; 
 
    } 
 

 
    .BlockSizer1, .BlockSizer2, .BlockSizer3 { 
 
     float: left; 
 
     text-align: left; 
 
    } 
 

 
    .BlockSizer1 { 
 
     Width: 100%; 
 
    } 
 

 
    .BlockSizer2 { 
 
     width: 49%; 
 
    } 
 

 
    .BlockSizer3 { 
 
     width: 33%; 
 
    } 
 

 
    #ContactForm { 
 
     Padding: 5px; 
 
    } 
 

 
    #ContactForm span { 
 
     width: 49%; 
 
     padding: 5px 0 0 0; 
 
     display: inline-block; 
 
    } 
 

 
    #ContactForm > .textarea { 
 
     width: 100%; 
 
    } 
 

 
    #ContactForm > .textarea textarea { 
 
     width: 98%; 
 
     Min-Height: 200px; 
 
     margin: 1em 0 1em 0em; 
 
    } 
 

 
    #ContactForm input { 
 
     width: 98%; 
 
     color: #999999; 
 
     outline: none; 
 
     padding: 10px; 
 
     Border: 1px solid #a0a0a0; 
 
    } 
 

 
    .ContactFormButton, .ContactFormButton input { 
 
     Width: 100% !important; 
 
    } 
 

 
    textarea.ContactForm { 
 
     width: 100%; 
 
     padding: 10px; 
 
     Min-Height: 200px; 
 
    } 
 

 
    @media screen and (max-width: 1000px) { 
 
     div.ContactForm, div.ContactFormRight { 
 
      width: 100%; 
 
      Margin: 5px 0; 
 
      float: none; 
 
      padding: 0; 
 
     } 
 

 
     .BlockWrapper { 
 
      width: 100%; 
 
     } 
 

 
     .BlockSizer2 { 
 
      width: 100%; 
 
     } 
 

 
     #ContactForm span { 
 
      width: 100%; 
 
      padding: 5px 0 0 0; 
 
      display: inline-block; 
 
     } 
 

 
    } 
 

 
</style>

<div class="Block"> 
 
    <div class="BlockWrapper"> 
 
     <div class="BlockSizer2"> 
 
      <form ID="ContactForm" action="#" method="post"> 
 
       <h1>Contact Me</h1> 
 

 
       <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. 
 
        Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt 
 
        tortor dapibus.</p> 
 
       <span><input type="text" name="Name" placeholder="Name" required=""/></span> 
 
       <span class="ContactFormRight"><input class="" type="text" name="Subject" placeholder="Company Name" 
 
                 required=""/></span> 
 
       <span><input type="email" name="Email" placeholder="Email" required=""/></span> 
 
       <span class="ContactFormRight"><input type="text" name="Phone" placeholder="Phone" required=""/></span> 
 
       <span class="textarea"><textarea name="Message" placeholder="Message..." required></textarea></span> 
 
       <span class="ContactFormButton"><input type="submit" value="Submit"></span> 
 
      </form> 
 
     </div> 
 
     <div class="BlockSizer2"> 
 

 
     </div> 
 
    </div> 
 
</div>

ここでは10

出典

2017-07-25 14:47:29

に設定しようとしました申し訳ありません。。問題は、メディアスクリプトが始動する前であり、フォームは互いに重なり合っています。 – user1451070

私の答えは働いていないのですか？ –

残念ながらそれは見えません。テキストエリアは、入力フィールドと同じ塗りつぶしスペースを持たず、間隔を維持しません。 – user1451070

スパン問題なく、クリーンなバージョンです：

.Block { 
 
\t width : 350px; 
 
\t margin : auto; 
 
\t margin-top : 25px; 
 
} 
 

 
#contactform .flex { 
 
\t display : flex; 
 
\t justify-content : space-between; 
 
\t margin-top : 15px; 
 
} 
 

 
#contactform .flex input { 
 
\t width : 47%; 
 
\t height : 35px; 
 
\t padding : 5px; 
 
} 
 

 
#contactform textarea { 
 
\t width : 100%; 
 
\t height : 100px; 
 
\t margin-top : 15px; 
 
} 
 

 
#contactform #submit { 
 
\t display : block; 
 
\t margin : auto; 
 
\t margin-top : 15px; 
 
\t width : 100%; 
 
\t height : 35px; 
 
\t cursor : pointer; 
 
}

<div class="Block"> 
 

 
\t <h1>Contact Me</h1> 
 
\t <p>Lorem ipsum primis in faucibus. Praesent faucibus massa elit, vitae ultrices libero dapibus nec. Maecenas cursus rutrum odio ut convallis. Curabitur viverra est in diam tincidunt, nec tincidunt tortor dapibus.</p> 
 
\t 
 
\t <form id="contactform" action="#" method="post"> 
 
\t 
 
\t \t <div class="flex"> 
 
\t \t \t <input type="text" name="Name" placeholder="Name" required /> 
 
\t \t \t <input type="text" name="CompanyName" placeholder="Company Name" /> 
 
\t \t </div> 
 
\t \t <div class="flex"> 
 
\t \t \t <input type="text" name="Email" placeholder="Email" /> 
 
\t \t \t <input type="text" name="Phone" placeholder="Phone" /> 
 
\t \t </div> 
 
\t \t 
 
\t \t <textarea name="Message" placeholder="Message..."></textarea> 
 
\t \t 
 
\t \t <input id="submit" type="submit" value="Submit"/> 
 
\t 
 
\t </form> 
 
\t 
 
</div>

出典

2017-07-25 14:53:38

入力フィールドがブラウザで適切にサイズ変更されない

答えて

関連する問題