Question

我通过使用具有固定宽度列的表来设置表单样式，我希望<td>中的输入元素填充容器。我知道CSS盒子模型，我知道元素会随着width: 100%而渗透，但问题在于它的一致性。

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

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

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

是否有纯CSS解决方案？我不希望每次更新页面的一部分时都运行此函数，比如在AJAX调用...

Answer 1

您可以在文本字段和textareas上使用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允许您调整textareas的大小，但如果您将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#input

Answer 4

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

不可靠性的两个原因：

CSS无法描述表单元素的某些功能。 <select>元素就是一个很好的例子：没有任何CSS属性可以描述<select>元素在不同操作系统上的不同方式。

试图弄清楚哪些CSS属性应该影响表单元素，以及如何为浏览器制造商设置一个老鼠的巢，所以他们大多只留下它。 Safari是一个值得注意的例外;见例如http://webkit.org/blog/17/the-new-form-controls-checkbox-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输入元素（提交，按钮，文本），textarea元素甚至选择元素。在我正在尝试的浏览器中，select元素的长度几乎相等。

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

使用填充样式化HTML FORM元素，宽度为100％

6 个答案: