html - 如何使用 CSS 让一个或多个元素填充剩余空间？

Question

我有一个输入表单，左侧有一列包含输入标签，右侧一列包含输入元素。现在它是一张 table (抱歉):

<tr>
  <td>Header</td>
  <td><input /></td>
</tr>

我有一些输入，我想采用以下形式:

<tr>
  <td>Header (Extra)</td>
  <td><input /> (<input />)</td>
</tr>

在第一种情况下，输入应扩展以填充整个列。在第二个中，我希望两个输入尽可能扩展至相同大小，并填充该列。

理想情况下，我的显示应该是这样的

Row 1         _______________________
Row 2 (Extra) __________ (__________)

这可能吗？将其转换为更语义化的 html 的想法也会受到欢迎。另请注意，我希望所有“第 2 行”行尽可能位于 1 行上，它应该与灵活的表格宽度配合使用。

Answer 1

我不会为此使用 CSS，我只是添加第二个 <td>元素，但您必须使用一些额外的 CSS 来设置宽度等。

<tr>
  <td>Header</td>
  <td colspan="2"><input style="width: 99.6%" /></td>
</tr>
<tr>
  <td>Header (Extra)</td>
  <td><input style="width: 99.3%" /></td>
  <td>(<input style="width: 99.3%" />)</td>
</tr>

我使用 99.3% 作为宽度，因为输入元素略有不同，100% 会导致它溢出边界。根据我的经验，我发现 99.3% 的方法适用于大多数情况。

Full JSFiddle Example