html - CSS 标准化填充

Question

我有以下CSS：

.form td:not(:last-child) {
    padding-right: 15px;
} 

.form td:first-child {
    padding-left: 3px;
}

.form td:last-child {
    padding-right: 5px;
}

input,select {
    width: 100%;
}

我的 HTML 是：

<table class="form">
    <tr>
        <td><input value="foo" /></td>
        <td><input value="bar" /></td>
        <td>
            <select>
                <option>nono1</option>
                <option>nono2</option>
                <option>nono3</option>
            </select>
        </td>
        <td><input value="foo2" /></td>
    </tr>
    <tr>
        <td><input value="foo2" /></td>
        <td>
            <select>
                <option>nono1</option>
                <option>nono2</option>
                <option>nono3</option>
            </select>
        </td>
        <td><input value="foobar2" /></td>
        <td><input value="foo22" /></td>
    </tr>
</table>

JSFiddle 链接

这将产生如下内容：

如何select与确切的尺寸相匹配input元素的确切尺寸匹配？

谢谢！

Answer 1

使用盒子大小

input,select {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}