【发布时间】:2012-06-07 10:30:09
【问题描述】:
我正在表格中呈现一个表格,其中标签位于标签(左侧)中,文本输入位于标签中(标签右侧)。 为了灵活性,我想写尽可能少的 css 并让一切都神奇地到位,这样:
- 单元格扩展以适应最长标签的宽度
- 右侧的字段会扩展以填满单元格的整个宽度
我一直在尝试width:100% 和width:auto 对这些不同元素的各种组合,但无济于事。这样做有可能吗,还是我应该放弃并指定像width:Npx 这样的硬宽度?
【问题讨论】:
我正在表格中呈现一个表格,其中标签位于标签(左侧)中,文本输入位于标签中(标签右侧)。 为了灵活性,我想写尽可能少的 css 并让一切都神奇地到位,这样:
我一直在尝试width:100% 和width:auto 对这些不同元素的各种组合,但无济于事。这样做有可能吗,还是我应该放弃并指定像width:Npx 这样的硬宽度?
【问题讨论】:
不确定您的代码是什么样的(如果您发布,答案会好得多......)。
无论如何:如果没有指定宽度,单元格会自然地扩展到最长元素的宽度,但是你不能让元素同时扩展到单元格的宽度!这将使宽度的计算变得不可能。所以我建议以某种方式修复内部内容。输入字段长度相同时看起来很棒...
【讨论】:
就我而言,您有两个选择。您可以使用表格实现解决方案,让您的标签具有可变长度,或者将它们设置为固定宽度并使用无表格标记。我个人认为没有令人信服的理由选择一种解决方案而不是另一种解决方案,尽管一些 Web 开发人员几乎会做任何事情来避免在他们的标记中使用 <table> 元素。
话虽如此,如果您使用表格,此解决方案非常简单:http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}
【讨论】: