Javascript 使用填充设置HTML表单元素的样式，宽度为100%

我正在使用一个具有固定宽度列的表设置表单样式，我希望

中的输入元素填充容器。我知道CSS框模型，我知道元素会随着

width:100%

而溢出，但问题在于它的一致性

元素按预期渗出，但

元素没有。这导致我的字段不能正确对齐。我尝试了所有属性，如溢出、显示、空白。。。这没什么区别。

元素有什么作用？我可以在Firebug中看到，它们与输入元素具有相同的长方体模型属性，但它们的渲染方式不同

我正在使用HTML5doctype，这在Firefox和Chrome中都会发生

现在，我正在使用一个JS函数修复这个问题，该函数使用类stretch选择所有元素，并计算和设置静态宽度，使其适合容器内部。这完美地排列了表单的元素。（我不得不排除

元素，因为它们的宽度已经很好了……奇怪的怪癖。）

---

有没有一个纯粹的CSS解决方案？我不想每次更新页面的某个部分时都运行此函数，比如AJAX调用…

这不是最有用的答案，但是表单元素的CSS样式在浏览器之间是非常不可靠的。像您这样的JavaScript解决方案是最好的选择

不可靠的两个原因：

表单元素的某些特性不能用CSS来描述。

元素就是一个很好的例子：没有任何CSS属性可以描述

元素在不同操作系统上的不同外观

试图弄清楚哪些CSS属性应该影响表单元素，以及如何影响表单元素，对于浏览器制造商来说是一个老鼠窝，所以他们基本上不去管它。狩猎是一个显著的例外；见例

你可以说表单元素在站点之间应该是相同的，不管站点所有者的意图如何，这样用户就知道他们在点击什么

---

请参阅以进行更深入的检查。

最好的方法是使用div伪造元素的边框

<div class="formholder>
    <textarea></textarea>
</div>

---

当然，您可以将其扩展到其他字段。某些浏览器可能会给您带来问题。Chrome和webkit允许您调整文本区域的大小，但如果添加

resize:none

对于CSS，它应该禁用它，但是YMMV。

说您的html看起来有点像这样：

<form><table><tr>
 <td><input type="text" /></td>
 <td><select><option /><option /></select></td>
</tr></table></form>

---

还是我把你的问题搞错了？

从各种可用性研究中了解以下结果可能会有帮助

1） 对于大多数表单，人们更喜欢看到表单元素正上方的标签：

2） 人们发现，如果表单元素的大小适当，有助于建议需要多少信息，那么表单元素将非常有用

<ul>

    <li><label for="firstname">First Name</label><br>
        <input type="text" id="firstname" name="firstname" size="15"></li>

    <li><label for="age">Age</label><br>
        <input type="text" id="age" name="age" size="3"></li>

    <!-- ... more list items -->

</ul>

名字


年龄

注意：本例中的列表将被设置样式，以便它不会显示为项目符号列表。以这种方式使用列表有助于提高可访问性，因为屏幕阅读器会告诉用户列表中包含多少项

我认为这可能是有用的，因为它表明，试图在表中布局表单并将所有输入拉伸到相同长度可能会有点浪费

---

您可以使用

框大小：边框框。
以下CSS适用于Moz Firefox、html输入元素（提交、按钮、文本）、textarea元素，甚至select元素。在我尝试的浏览器中，选择元素的长度几乎相等

table {width:100%;}
form input { width: 100%; }
form textarea { width: 100%; overflow-y: scroll; resize: vertical; }
form select { width: 100%; }

我们能看到一些源代码吗？我做了一个屏幕截图来澄清这个问题：我希望它依赖于容器，因为我希望设计是流畅的。例如，在一个有3列的表中，我定义了2列的宽度，并根据表的大小自动调整第3列的大小。我希望td中的表单元素遵循SuiteYes，这应该行得通，但我希望避免这种情况，因为我正在开发一个包含大量表单和字段的Web应用程序。。我不想太乱
<ul>

    <li><label for="firstname">First Name</label><br>
        <input type="text" id="firstname" name="firstname" size="15"></li>

    <li><label for="age">Age</label><br>
        <input type="text" id="age" name="age" size="3"></li>

    <!-- ... more list items -->

</ul>

table {width:100%;}
form input { width: 100%; }
form textarea { width: 100%; overflow-y: scroll; resize: vertical; }
form select { width: 100%; }