Question

我有这个页面及其css，我为标签和输入定义了相同的宽度，但它们在浏览器上显示的宽度不同，为什么会发生这种情况？

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

使用样式属性＆＃34; box-sizing：border-box;＆＃34;标签。

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

Answer 2

在某些浏览器中，默认的大小调整为“border-box”，表示：

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

在此类浏览器中，您的标签为220px

但在其他情况下，默认的大小调整是“内容框”，这意味着：

width =内容宽度

在此类浏览器中，您的标签为200px

所以只需为所有元素设置框大小：

*{

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

}

仅为标签设置此项也可以，但为所有设置都很容易充电

标签和输入宽度与css不同

2 个答案: