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

问题描述

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

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 stylesheet 样式.

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

如何将宽度设为 100%?

How can I make the width 100%?

推荐答案

Demo Fiddle

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

Demo Fiddle

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

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

注意.demo fiddle 没有盒子尺寸设置

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:

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.

边框框

width 和 height 属性包括 padding 和 border，但是不是保证金.这是 Internet Explorer 使用的框模型文档处于 Quirks 模式.

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