使用填充设计 HTML FORM 元素，宽度为 100%

Question

我通过使用具有固定宽度列的表格来设计表单，并且希望 内的输入元素填充容器。我知道 CSS 盒模型，也知道元素会随着 width: 100% 渗透，但问题在于它的一致性。

元素按预期渗透，但 元素却没有。这导致我的字段无法正确排列。我已经尝试了所有属性，如溢出、显示、空白......它没有任何区别。 元素有什么用？我可以在 Firebug 中看到它们与输入元素具有相同的框模型属性，但它们的渲染效果不同。

我正在使用 HTML 5 文档类型，这在 Firefox 和 Chrome 中都会发生。

现在，我正在使用 JS 函数修复此问题，该函数选择所有具有拉伸类的元素并计算和设置静态宽度以使其适合容器内。这完美地排列了表格的元素。 （我必须排除 元素，因为它们的宽度已经可以了......奇怪的怪癖。）

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

Answer 1

您可以在文本字段和文本区域上使用 box-sizing: border-box; 。
它解决了与选择框的差异。

Answer 2

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

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

有了这个CSS：

.formholder {padding:10px;background:white;border:1px solid #ccc}
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0}

当然，您可以将其扩展到其他领域。某些浏览器可能会给您带来问题。 Chrome 和 webkit 允许您调整文本区域的大小，但如果您将 resize: none; 添加到 CSS，它应该禁用它，但 YMMV。

Answer 3

它可能会帮助您了解以下各种可用性研究的结果。

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>

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

我认为这可能很有用，因为它表明您尝试在表格中布局表单并将所有输入拉伸到相同的长度可能有点浪费精力。

http://dev.w3.org/html5/markup/input.html#输入

Answer 4

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

不可靠的两个原因：

1. 表单元素的某些功能无法用 CSS 来描述。 元素就是一个很好的例子：没有任何 CSS 属性可以描述 元素在不同操作系统上的不同外观。

   尝试找出哪些 CSS 属性应该影响表单元素以及如何影响表单元素，对于浏览器制造商来说是一个麻烦事，因此他们大多不去管它。 Safari 是一个明显的例外。参见例如 http://webkit.org/blog/17 /the-new-form-controls-checkbox-2/

2. 您可以认为，无论网站所有者的意图如何，网站之间的表单元素应该看起来相同，以便用户知道他们正在点击什么.

请参阅http://meyerweb.com/eric/thoughts/2007/ 05/15/formal-weirdness/ 进行更深入的检查。

Answer 5

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

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

仅使用 input 和 select 来设置宽度怎么样？

td { width: auto; }
input[type=text] { width: 100px; }
select { width: 100px; }

还是我把你的问题理解错了？

Answer 6

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

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