当输入框有边框和填充时，如何将 CSS 样式设置为百分比？

Question

如果容器是 500px 宽，标签是 30% 宽，输入框是 70% 宽，那么应该一切都适合，但问题是输入框有一个 4px 左右的边框，并左右填充 2px，使其比原来宽 6px。

我们可以通过使宽度不是 70%，而是 68% 之类的来破解它，但这有点 hacky。有没有办法处理它？ （我们不能做 CSS 重置，因为输入框通常需要一个边框，假设我们不使用不占用任何空间的轮廓来修改它。

CSS：

#my-container { width: 500px }
#first-name-label { display: inline-block; width: 30% }
#first-name { display: inline-block; width: 70% }

以下是一些例子：

1. http://jsfiddle.net/hNaM7/12/outWidth: 356（用于输入框，如调试控制台所示）
2. http://jsfiddle.net/hNaM7/13/outerWidth 351
3. http://jsfiddle.net/hNaM7/14/outerWidth 349
4. http://jsfiddle.net/hNaM7/15/outerWidth 349
5. http://jsfiddle.net/hNaM7/20/ 不会换行，但是输入框会去 超出容器宽度

Answer 1

宽度不准确的原因是它们设置为box-sizing:content-box;，这是box-sizing 的默认设置。在 CSS 中计算 width 和 height 时，border 和 padding 在 width 和 height 的外部计算，即使设置为 width:100%; 也会增加额外的空间。为了抵消这种情况，您只需将带有边框的元素设置为box-sizing:border-box;。这会将边框和内边距都带入宽度和高度计算中。

试试这个：

#my-container { width: 500px; }
#first-name-label { display: inline-block; width: 30%; }
#first-name {
   display:inline-block;
   width: 70%;
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

或者，如果您想更具体地输入文本，试试这个：

input[type=text] {
   -webkit-box-sizing: border-box; /* Safari, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

CSS 语法：

box-sizing: content-box|border-box|initial|inherit;

浏览器支持：

Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

如果您想了解更多相关信息，可以在此处找到有关 box-sizing 的内容丰富的文章：

http://css-tricks.com/box-sizing/

http://css-tricks.com/almanac/properties/b/box-sizing/

Answer 2

这样的事情怎么样： http://jsfiddle.net/hNaM7/21/

#my-container { width: 500px }
#first-name-label { display: inline-block; width: 30% }
#first-name { display: inline-block; width: 70%; margin: 0 -3px;}

Answer 3

http://jsfiddle.net/fA75f/5/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

*,:before,:after {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

#my-container {
  width:500px;
}

#first-name-label {
  display:inline-block;
  width:30%;
}

#first-name {
  display:inline-block;
  width:70%;
}

Answer 4

你试过了吗

border-style: hidden

?

它应该有助于缓解表格元素中的边界冲突，这与您遇到的问题相同。