如何使输入和在css中选择相同的宽度 [英] How to make input and select to be same width in css

问题描述

在我的页面中，有多个输入和选择标签。

In my page, there are several input and select tags.

我使用 width：100％; 来定义它们的宽度，但是浏览器中的宽度不是 100％。

I use width:100%; to define their width, but the width in the browser is not 100%.

我使用chrome中的调试工具，发现还应用了useragent样式表样式。

I used the debug tool in chrome, and found there is also useragent stylesheet styles applied.

如何将宽度设为100％？

How can I make the width 100%?

推荐答案

演示小提琴

您应该理想地将样式与内容分开，因此在您的CSS中包括：

Demo Fiddle

You should ideally separate style from content, so in your CSS include:

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

nb。 演示小提示无框大小设置

nb. demo fiddle without box-sizing set

您需要使用 box-sizing：border-box ，以便调整大小以考虑任何浏览器特定或设置边距/填充/边框。 以下是有关该主题的实用阅读材料。

And you need to use box-sizing:border-box in order for sizing to take into account any browser specific or set margin/padding/borders. Here's a handy read on the subject.

MDN上的分级大小：

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

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

border-box

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

The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.

这篇关于如何使输入和在css中选择相同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！