在td内宽度为100%的文本输入扩展/继续扩展到td之外

Here is the live demo

这是现场演示

I'm trying to put a padded text input inside a td, and I want it to occupy 100% of the width, but it goes outside of the td. I don't understand why that happens, anybody knows?

我想把一个填充文本输入放到td中，我想让它占据100%的宽度，但是它超出td。我不明白为什么会这样，有人知道吗?

CSS

CSS

  table{
    border: solid 1px gray;
    width: 90%;
  }
  input{ width: 100%; padding:10px; }

HTML

HTML

<table>
  <tr>
    <td style="width:150px;">Hello</td>
    <td><input type='text' value='hihihih'/></td>
  </tr>
</table>

4 个解决方案

#1

Explanation

解释

Here's a link to the W3C Box model which explain in detail what happens to your element.

这里有一个到W3C Box模型的链接，它详细地解释了您的元素发生了什么。

- - - - -

- - - - - - -

All input elements have borders by default and may also have padding and margins, but most importantly, it follows the W3C box model specifications using the content-box.

所有输入元素在默认情况下都有边框，也可能有填充和边距，但最重要的是，它遵循使用内容框的W3C box模型规范。

This means that if you set the width to 100%, the actual size of the element will be greater than 100% when you include padding/borders, as shown in the images above.

这意味着，如果将宽度设置为100%，则包含填充/边框时，元素的实际大小将大于100%，如图所示。

---

Solution

解决方案

Add padding to the td to manually adjust the width of the input until it's where you want it to be. Remember that adding padding to the input means you have to add the same amount to the td to counteract the expansion.

向td中添加填充，以手动调整输入的宽度，直到输入达到您想要的位置。记住，向输入中添加填充意味着必须向td中添加相同的数量以抵消扩展。

Here's a live example

这是一个生活的例子

input {
    width: 100%;
    padding: 10px;
    margin: 0px;
}

table .last, td:last-child { 
    padding: 2px 24px 2px 0px; 
}

---

Alternative solution

可选择的解决方案

You can also do the CSS3 version using box sizing (browser compatability).
This property can be used to switch between the two box models and will make it behave like you'd expect it to.

您还可以使用box size(浏览器兼容性)来执行CSS3版本。此属性可用于在两个框模型之间进行切换，并使其像您期望的那样运行。

Here's a live example

这是一个生活的例子

input {
    width: 100%;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

---

Here are some possible duplicates of the same question

这里有一些可能重复的相同问题

• can i stop 100% width text boxes from extending beyond their containers
• 我能阻止100%宽度的文本框扩展到它们的容器之外吗
• Problem with input type='text' and textarea width
• 输入类型='text'和textarea宽度的问题
• 100% Width div's and form elements + padding?
• 100%宽度div和表单元素+填充?

#2

Simple. 100% width + padding, thats why. You should set padding for wrapper, not input

很简单，100%宽度+填充，这就是为什么。您应该为包装器设置填充，而不是输入。

#3

you can use box-sizing property for this because padding add width in your input field .

您可以为此使用box尺寸属性，因为填充在输入字段中增加了宽度。

CSS:

CSS:

input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
    padding: 10px;
}

but it's not working IE7

但是IE7不工作

#4

Easiest way is to set the padding as a percent of width, subtracted from 100%.

最简单的方法是将填充设置为宽度的百分比，减去100%。

So:

所以:

input { 
   width:96%;
   padding:0 2%; 
}