我得到了一个内容部分,其宽度为60%。在此之上,我得到了40%宽度的文本输入。在该输入字段旁边,有一个提交按钮。因此,根据我的数学知识,两个输入字段和内容部分应具有相同的宽度。| _________ 40%_________ || ____ ____ 20%____ |
| _______________ 60%________________ |
但事实并非如此。
html:
<input id="plannername" placeholder="Name eingeben" type="text"></input><!--
--><input id="plannersubmit" type="submit" value="eintragen"></input>
<div id="content"></div>
CSS:
#plannername{ /* The text input */
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannersubmit{ /* The submit button */
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#content{
width:60%;
background-color:#9eefbc;
height:500px;
margin-left:20%;
padding-top:70px;
margin-top:3px;
}
我的完整代码在这里:http://codepen.io/tobiasglaus/pen/xgbeaj
您在输入框上设置了padding
,为了使其成为总宽度的一部分,您可以设置box-sizing: border-box;
或普遍执行:
* {
box-sizing: border-box;
}
包括伪元素在内的一种常见做法是:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
注意,即使您没有手动设置任何输入元素,也可以从浏览器设置一些默认的填充和边框。上述解决方案仍将应用。
您需要使用box-sizing: border-box
来填充填充物。尝试添加以下内容:
* {
box-sizing: border-box;
}
,也可以根据需要将其添加到单个div
S中。