gpt4 book ai didi

html - 标签和输入宽度与 css 不一样

转载 作者:行者123 更新时间:2023-11-28 04:51:39 24 4
gpt4 key购买 nike

我这里有这个页面和它的 css,我为标签和输入定义了相同的宽度,但它们在浏览器上显示的宽度不同,为什么会这样?

html, body{
font-family: Consolas;
font-size: 12px;
}

label{
display: block;
border:1px solid rgb(230,230,230);
width: 200px;
padding: 10px;
}

input[type=text]{
font-family: inherit; //without this the font is default
font-size: inherit; //without this the font is default
display: block;
border:1px solid rgb(230,230,230);
width: 200px;
padding: 10px;
}
<html>
<head>
<link rel="stylesheet" href="input.css">
</head>
<body>
<form>
<label>USER NAME</label>
<input type="text" placeholder="USER NAME" name="user_name"/>
</form>
</body>
</html>

我是初学者,所以请帮助我。

最佳答案

在某些浏览器中,默认的 box-sizing 是 'border-box',这意味着:

宽度=内容宽度+边框宽度+填充宽度

在这样的浏览器中你的标签是 220px

但在其他情况下,默认的 box-sizing 是 'content-box',这意味着:

宽度=内容宽度

在这样的浏览器中你的标签是 200px

所以只需为所有元素设置 box-sizing 即可:

*{

-webkit-box-sizing: border-box ;

-moz-box-sizing: border-box ;

box-sizing: border-box;

}

*{

-webkit-box-sizing: content-box ;

-moz-box-sizing: content-box ;

box-sizing: content-box;

}

只给label设置这个也可以,但是给all设置容易收费

关于html - 标签和输入宽度与 css 不一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40669887/

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