Question

我有一张固定宽度的桌子，在桌子里我需要有一些inputs(text)，它具有相同的宽度，但我不希望输入的文字是在left:0，我希望他们从左边有一些填充。但是当我将填充放到那些输入时，宽度变为大于100%。

这里是HTML：

<table cellspacing="25">
    <tr>
        <td><input type="text" placeholder="lalala"></td>
    </tr>
</table>

这就是CSS。

table {
    background-color: red;
    width: 300px;
}
table input {
    width: 100%;
    padding-left: 10px;
}

如何确保输入元素的宽度为100%表格单元格的宽度？

Answer 1

将此css规则添加到您的输入中：

box-sizing: border-box;

box-sizing属性用于告诉浏览器调整大小   属性（宽度和高度）应包括。

它们应该包括边框吗？或者只是内容框。

这是一个片段：

table {
    background-color: red;
    width: 300px;
}
table input {
    width: 100%;
    padding-left: 10px;
    box-sizing: border-box;
}

<table cellspacing="25">
    <tr>
        <td><input type="text" placeholder="lalala"></td>
    </tr>
</table>

Answer 2

您可以使用box-sizing: border-box;（support），其中＆＃34;宽度和高度属性包括填充和边框，但不包括边距。＆＃34; 在你的CSS中为@ 1l13v在他的答案中完成的指定元素：

table input {
   box-sizing: border-box;
}

或者您可以使用calc功能（support）：

table input {
    width: calc( 100% - 10px );
}

Answer 3

另一种选择是用百分比计算输入的宽度和填充。如果元素的内容，边框，边距和填充的总和为100%，那么它应该符合您的要求。请参阅css中的box-model概念：http://www.w3schools.com/css/css_boxmodel.asp

所有HTML元素都可以视为框。在CSS中，术语＆＃34;框   模型＆＃34;在谈论设计和布局时使用。

CSS框模型本质上是一个包装HTML的框   元素，它包括：边距，边框，填充和   实际内容。

盒子模型允许我们在元素周围添加边框并进行定义   元素之间的空间。

例如，如果您想要左侧为10% padding，则宽度应为90%。

CSS：

table {
    background-color: red;
    width: 300px;
}
table input { 
    width: 90%;
    padding-left: 10%;
}

Answer 4

表的宽度将是宽度加上填充。尝试从宽度中减去一些百分点，如下所示：

table input {
  width: 90%;
  padding-left: 1em;
}

我还会将像素更改为ems，因为它们在不同的屏幕分辨率下会更稳定一些。