在td中，宽度为100%的文本输入框会扩展/延伸到td之外。

19 浏览
0 Comments

在td中，宽度为100%的文本输入框会扩展/延伸到td之外。

这是一个实时演示。

我试图在td中放置一个带有填充的文本输入框，并希望它占据100%的宽度，但它超出了td的范围。

我不明白为什么会这样，有人知道吗？

CSS

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

HTML


  

    Hello

0

3 答案

0 Comments

问题原因：该问题的原因是因为`td`元素中的文本输入框的宽度超出了`td`元素的宽度。这是因为文本输入框的宽度默认会包括其内部的填充（padding）。

解决方法：可以使用`box-sizing`属性来解决这个问题，因为`box-sizing: border-box;`会将填充（padding）和边框（border）的宽度包含在元素的总宽度中，从而防止元素的宽度超出其容器的宽度。

在CSS中添加以下样式代码：

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

这样可以确保文本输入框的宽度不会超出其容器的宽度，并且填充（padding）会被包含在元素的总宽度中。

需要注意的是，这种解决方法在IE7浏览器中不起作用。所以如果需要兼容IE7，可以考虑使用其他方法来解决这个问题。

0
0 Comments

问题原因：输入框的宽度设置为100%时，实际宽度会超出100%的大小，因为输入框默认有边框，并且可能有内边距和外边距，这符合W3C盒模型规范。

解决方法：给包含输入框的td添加内边距，手动调整输入框的宽度，直到达到所需位置。需要注意的是，如果给输入框添加了内边距，则需要在td中添加相同的内边距来抵消扩展。

另一种解决方法：使用CSS3版本的box-sizing属性，可以在两种盒模型之间切换，并使其表现如您所期望的那样。

以下是可能与此问题相同的一些重复问题：

- 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?

文章来源：[Stack Overflow](https://stackoverflow.com/questions/67235464)

解决方法示例代码：

input {
    width: 100%;
    padding: 10px;
    margin: 0px;
}
table .last, td:last-child { 
    padding: 2px 24px 2px 0px; 
}

替代解决方法示例代码：

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

0
0 Comments

问题出现的原因是因为在设置了100%宽度的输入框内部，如果还设置了padding，就会导致输入框的宽度超出td的边界。解决方法是将padding设置在包裹输入框的容器上，而不是直接设置在输入框上。以下是代码示例：

通过将padding设置在包裹输入框的容器上，可以确保输入框在100%宽度的情况下不会超出td的边界。这样就可以解决输入框宽度超出td的问题。

0