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 link

这会产生这样的东西:

如何使 select 与 input 元素的确切大小相匹配？

谢谢!

Answer 1

使用box-sizing

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