gpt4 book ai didi

html - CSS 宽度不正确/对我来说没有意义

转载 作者:太空宇宙 更新时间:2023-11-04 01:57:30 26 4
gpt4 key购买 nike

我得到了一个宽度为 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;
}

请注意,即使您没有手动设置,浏览器也会为大多数输入元素设置一些默认的填充和边框。上述解决方案仍然适用。

关于html - CSS 宽度不正确/对我来说没有意义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42332609/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com