Question

如果容器宽度为500px，标签宽度为30％，输入框宽度为70％，那么一切都应该适合，但问题是输入框左右边框为4px，并且向左和向右填充2px，使其比它宽6px。

我们可以通过使宽度不是70％，但是68％或者其他东西来破解它，但这有些骇人听闻。有办法处理吗？（我们不能进行CSS重置，因为输入框通常需要一个边框，假设我们不使用轮廓来破解它，它不会占用任何空间。）

CSS：

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

以下是一些例子：

http://jsfiddle.net/hNaM7/12/ outWidth：356（对于输入框，如调试控制台中所示）
http://jsfiddle.net/hNaM7/13/ outerWidth 351
http://jsfiddle.net/hNaM7/14/ outerWidth 349
http://jsfiddle.net/hNaM7/15/ outerWidth 349
http://jsfiddle.net/hNaM7/20/不会换行，但输入框会出现超出容器的宽度

Answer 1

这样的事情怎么样： 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 2

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 3

宽度不准确的原因是因为它们设置为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

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

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

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

Answer 4

你试过吗

border-style: hidden

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

如何在输入框的宽度为边框和填充时将其设置为百分比样式？

4 个答案: