使用填充样式化HTML FORM元素,宽度为100%

Question

我正在通过使用具有固定宽度列的表来设置表单样式,并且我希望其中的输入元素<td>填充容器.我知道CSS盒子模型,我知道元素会流失width: 100%,但问题在于它的一致性.

<input>元素按预期渗透,但<select>元素没有.这导致我的字段没有正确排列.我已经尝试了所有属性,如溢出,显示,空白......它没有任何区别.用什么<select>元素？我可以在Firebug中看到它们与input元素具有相同的box模型属性,但它们不会呈现相同的.

我正在使用HTML 5 doctype,这在Firefox和Chrome中都会发生.

现在,我正在使用JS函数修复此问题,该函数选择具有类拉伸的所有元素并计算并设置静态宽度以使其适合容器内部.这完美地排列了表单的元素.(我不得不排除<select>元素,因为它们的宽度已经好了......奇怪的怪癖.)

有一个纯CSS解决方案吗？我不希望每次更新页面的一部分时都运行此函数,就像在AJAX调用上一样...

Answer 1

你可以box-sizing: border-box;在textfields和textarea上使用.它解决了与选择框的差异.