HTML5 - 带填充的文本输入太宽

Question

我想要一个input字段，它将从内部填充。我正在转移到HTML5。我在HTML 4.01 Transitional中工作，但在HTML5中，input字段开始超出表框架。你能帮我纠正一下HTML吗？

HTML代码的一部分

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 100%; padding: 5px"  autocomplete="off" />
</td>

看起来像这样：

但应该是这样的：

这是一个小提琴，你可以查看并玩它：http://jsfiddle.net/kelu/DbXy5/5/

Answer 1

将此CSS box-sizing规则添加到您的输入字段：

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

<强> jsFiddle example

Answer 2

使用box-sizing: border-box

    <input type="text" name="model_search" style="width: 100%; padding: 5px; box-sizing:border-box"  autocomplete="off" />

包含供应商前缀

box-sizing:border-box;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

box-sizing : border-box

另外:(如果我可以，（Royi））

-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */

Answer 3

尝试：

.content_listing_r input {
    box-sizing:border-box;
    -moz-box-sizing: border-box;
}

Answer 4

将填充添加到类“content_listing_r”而不是输入区域，这将在单元格周围添加填充。

<td class="content_listing_r" style="width: 80%; padding: 5px;">
    <input type="text" name="model_search" style="width: 100%"  autocomplete="off" />
</td>

或者，将宽度设置得更小，并以百分比形式添加填充

<td class="content_listing_r" style="width: 80%;">
    <input type="text" name="model_search" style="width: 96%; padding: 2%"  autocomplete="off" />
</td>

Answer 5

您可以将方便的calc规则用于css width：

<input type="text" name="model_search" style="width: -webkit-calc(100% - 10px); width: calc(100% - 10px); padding: 5px" autocomplete="off" />

...虽然在不太流行的浏览器中可能存在兼容性问题

Answer 6

如果输入字段在事物内，那么你可以使用宽度！

当您添加padding时，它会根据参数添加一些小的宽度和高度。您正在使用100%宽度并添加一些填充。这是什么问题！

试试这个：

width: 96%;

减去输入的宽度，它会为你提供你想要的元素！ :)

http://jsfiddle.net/afzaal_ahmad_zeeshan/DbXy5/8/

Answer 7

如果更改

，填充会增加额外的宽度

padding:5px;

到

padding:5px 0;

它会在保留顶部和底部填充的同时删除额外的宽度来解决您的问题。