html - 输入字段无法使用浏览器正确调整大小

Question

好的，在调整浏览器大小时，输入字段不会正确调整大小并且会在中间相互重叠并在媒体脚本启动并将所有内容设置为 100% 之前扭曲。文本区域宽度 100% 与表格不对齐。处理这个联系表已经很累了，我什至还没有想出如何让它发送电子邮件，哈哈...

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

额外的问题:为什么输入必须包含在一个 span 中或者它完全忽略父 div 边界？

根据请求，这是 JSFIDDLE 脚本。 https://jsfiddle.net/LxLux35m/1/

 .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: 92%;
    	color: #999999;
    	outline: none;
    	padding: 10px;
    	Border: 1px solid #a0a0a0;
    }
    
    .ContactFormButton, .ContactFormButton input {
    	Width: 100% !important;
    }
    
    @Media screen and (max-width: 1000px) {
    	div.ContactForm, div.ContactFormRight {
    		width: 100%;
    		Margin: 5px 0;
    		float: none;
    		padding: 0;
    	}
    }
    
    textarea.ContactForm {
    	width: 100%;
    	padding: 10px;
    	Min-Height: 200px;
    }

<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>

Answer 1

检查这段代码只是更新你的媒体查询

<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>