如何在css中进行输入并选择相同的宽度

Question

在我的页面中,有几个input和select标签.

我用它width:100%;来定义它们的宽度,但浏览器中的宽度不是100%.

我在chrome中使用了调试工具,发现还应用了useragent样式表样式.

如何使宽度100%？

Answer 1

演示小提琴

理想情况下,您应该将样式与内容分开,因此在CSS中包括:

input, select{
  width:100%;
  box-sizing:border-box;
}

NB.演示小提琴没有盒子大小设置

并且您需要使用box-sizing:border-box以便调整大小以考虑任何特定于浏览器或设置边距/填充/边框.这是一个关于这个主题的方便阅读.

MDN上的盒子大小:

box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型.可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为.

边界框

宽度和高度属性包括填充和边框,但不包括边距.这是文档处于Quirks模式时Internet Explorer使用的框模型.