使用display：table-cell布局输入元素

Question

我正在尝试编写一个CSS类，它允许我将一个元素（混合按钮和文本输入）放在一行中，以便它们相邻。我在父级上使用display:table，并使用display:table-cell将每个元素包装在一个容器中，除了一个我无法解决的错误之外，它工作正常。

例如，parent是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;
}

给出了这个，这没关系：

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

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

哪个好，但是拉伸'提交'按钮。我可以忍受这种情况，但有没有办法让它像第二张图像（但没有随机空间）使用我当前的方法，或者我应该解雇它＆amp; amp;尝试不同的东西？

---

编辑我事先并不知道输入的大小：我无法在它们上设置宽度，这有效地排除了大多数内联块/浮点方法。理想情况下我需要IE 8/9支持，这就是为什么display：table的尝试。

---

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

Answer 1

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

摘要是您需要删除提交按钮上的width: 100%，然后提供第二个表格单元格width: 100%。您还需要使文本框占据100%宽度的整个父级。

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

Answer 2

nm，说得太早了。以为我解决了它，但是没有，正在从其他CSS获得效果。