html - 扩展的 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 */
}