在td内具有100％宽度的文本输入扩展/继续在td之外 [英] Text input with 100% width inside a td expands/continues outside the td

问题描述

以下是

 输入{
 width：100％; 
 padding：10px; 
 margin：0px; 
} 
 
表.last，td：last-child {
 padding：2px 24px 2px 0px; 
} 
  

---

您也可以使用框大小（浏览器兼容性< a>）。

此属性可用于在两个框模型之间切换，并使它的行为像你所期望的那样。

这是一个 live example

 输入{
宽度：100％; 
 padding：10px; 
 margin：0px; 
 box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
} 
  

---

strong>重复。

• 可以阻止100％宽度的文本框扩展到它们的容器之外


• 输入类型='text'和textarea width的问题< a>


• 100％宽度div和表单元素+填充？

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?

CSS

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

HTML

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

解决方案

Explanation

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

- - - - -

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.

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.

---

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.

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.

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
• Problem with input type='text' and textarea width
• 100% Width div's and form elements + padding?

这篇关于在td内具有100％宽度的文本输入扩展/继续在td之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！