扩展的HTML表单填充所有可用空间

Question

我正在表格中呈现一个表格，标签中的标签（左）和标签中的文字输入（标签右侧）。 为了灵活起见，我想写尽可能少的CSS，让所有东西都神奇地落到原位，这样：

1. 细胞扩展以适应最长标签的宽度
2. 右侧的字段展开以填充单元格的整个宽度

我一直在尝试width:100%和width:auto对这些不同元素的各种组合，但无济于事。这样做是可能的，还是我应该放弃并指定像width:Npx这样的硬宽度？

Answer 1

不确定您的代码是什么样的（如果发布，答案会更好......）。

无论如何：如果没有指定宽度，单元格将自然扩展到最长元素的宽度，但是你不能让元素同时扩展到单元格的宽度！这将使宽度的计算变得不可能。所以我建议以某种方式修复内部内容。输入字段长度相同时看起来很棒......

Answer 2

就我而言，你有两个选择。您可以使用表格实现一个解决方案，该表格允许您为标签设置流体长度，或者将它们设置为固定宽度并使用无表格标记。我个人认为没有令人信服的理由选择一种解决方案，尽管一些Web开发人员几乎可以做任何事情来避免在他们的标记中使用<table>元素。

话虽如此，如果您使用表格，此解决方案非常简单：http://jsfiddle.net/Wexcode/VcSXU/

td:first-child { 
    white-space: nowrap; /* don't allow text to wrap to the next line */
}