输入字段不能使用浏览器正确调整大小

时间：2017-07-25 14:37:30

标签： html css html5 css3

好的，在调整浏览器大小时，输入字段不会正确调整大小，并且会在媒体脚本启动之前在中间相互重叠并变形，并将所有内容设置为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/

＆＃13;
＆＃13; 
 .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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

检查此代码只需更新您的媒体查询

＆＃13;
＆＃13; 
<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>
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

enter image description here

enter image description here

答案 1 :(得分：0)

这是一个更清洁的版本，没有跨度问题：

＆＃13;
＆＃13; 
.Block {
	width : 350px;
	margin : auto;
	margin-top : 25px;
}

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

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

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

#contactform #submit {
	display : block;
	margin : auto;
	margin-top : 15px;
	width : 100%;
	height : 35px;
	cursor : pointer;
}
＆＃13; 
<div class="Block">

	<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>
	
	<form id="contactform" action="#" method="post">
	
		<div class="flex">
			<input type="text" name="Name" placeholder="Name" required />
			<input type="text" name="CompanyName" placeholder="Company Name" />
		</div>
		<div class="flex">
			<input type="text" name="Email" placeholder="Email" />
			<input type="text" name="Phone" placeholder="Phone" />
		</div>
		
		<textarea name="Message" placeholder="Message..."></textarea>
		
		<input id="submit" type="submit" value="Submit"/>
	
	</form>
	
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题