html - 使用显示 :table-cell 布置输入元素

Question

我正在尝试编写一个 CSS 类，它允许我将表单元素(混合按钮和文本输入)排成一行，以便它们邻接。我在父级上使用 display:table，并用 display:table-cell 将每个元素包装在一个容器中，它工作正常，除了一个我可以想办法解决。

例如，父级是control-group，元素包装器是control-group-item，元素本身是control-group-input 。

.control-group
  .control-group-item
    .control-group-input{type: "text"}
  .control-group-item
    .control-group-input{type: "submit"}

这个的 CSS(我已经规范化了字体大小/行高/填充/浏览器怪异并且所有表单元素都是内联阻塞等):

.control-group {
    display: table;

.control-group-item {
    display:table-cell;
}

给出这个，没问题:

但是，理想情况下，我需要它来填充未确定大小的网格列，而不是浏览器决定我的元素应该有多大。如果在 .control-group 上应用 width:100%，会发生这种情况:

橙色是应用于表格单元格 control-group-item 的背景色。问题似乎与“提交”输入有关:提交保持其应有的大小，但浏览器普遍在表格单元格内的旁边添加额外的空间。因此，如果我将 width:100% 应用于每个 .control-group-input，我会得到:

这没问题，但会拉伸(stretch)“提交”按钮。我可以接受这一点，但是有没有什么方法可以使用我当前的方法让它像第二张图片一样(但没有随机空间)，或者我应该取消它并尝试不同的东西吗？

---

编辑 我事先不知道输入的大小:我无法为它们设置宽度，这有效地排除了大多数内联 block / float 方法。理想情况下，我需要 IE 8/9 支持，这就是尝试 d​​isplay:table 的原因。

---

编辑 2:这里是 Codepen 上的版本:http://codepen.io/DanielCouper/pen/knDmC 在那里重写代码后，我意识到我的问题是:如何计算表格单元格的宽度？特别是带有提交按钮的单元格有额外的空间。额外的空间似乎是随机的。

Answer 1

这是 codepen 中的工作版本:http://codepen.io/mkleene/pen/ldqDH

总结就是需要把提交按钮上的width: 100%去掉，然后给第二个table cell元素width: 100%。您还需要使文本框以 100% 宽度占据其整个父级。

您还需要确保 table 元素使用的是 auto 表格布局。