輸入字段不能正確調整大小與瀏覽器

好的，當調整瀏覽器的大小時，輸入字段不能正確調整大小，並且在媒體腳本啓動並將所有內容設置爲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

嘗試使用'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>

來源

2017-07-25 14:47:29

設置'#ContactForm span'對不起，我想我在描述什麼是問題時不清楚。問題出現在媒體腳本開始之前，表單相互重疊。 – user1451070

所以我的答案不起作用？ –

不幸的是它看起來不像。 textarea仍然沒有與輸入字段相同的填充空間，並且不保留它們的間距。 – 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

輸入字段不能正確調整大小與瀏覽器

回答

相關問題