如何使用CSS讓一個或多個元素填充剩餘空間？

我有一個輸入表單，左邊有一列包含輸入標籤，右邊有一個輸入元素。現在它是一個表（不好意思）：如何使用CSS讓一個或多個元素填充剩餘空間？

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

我有一對夫婦的投入，我想採取以下形式：

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

在第一種情況下，輸入應該擴大，以填補整列。在第二種情況下，我希望2個輸入可以擴大到相同的大小，並填充列。

理想的情況下，我的顯示器看起來像

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

這可能嗎？關於將其轉換爲更多語義html的想法也將受到歡迎。另外請注意，如果可能，我希望所有「第2行」行都在1行上，它應該使用靈活的表寬度。

來源

2011-09-03 Chris Marasti-Georg

我無法找到一個辦法讓這沒有把括號在自己的細胞正確格式化。

<table> 
    <tr> 
     <td>Header</td> 
     <td colspan="4"><input /></td> 
    </tr> 
    <tr> 
     <th>Target&nbsp;(Actual)</th> 
     <td><input /></td> 
     <td>&nbsp;(</td> 
     <td><input /></td> 
     <td>)</td> 
    </tr> 
</table> 

table { 
    width:27em; 
} 
table input { 
    width:99%; 
}

當我將表格寬度設置爲95％時，所有內容都與瀏覽器很好地調整。單元格上的一點填充使圓括號和輸入重疊。

來源

2011-09-06 15:13:28

use box-sizing：border-box; -moz-box-sizing：border-box; \t -webkit-box-sizing：border-box;寬度：100％ – bitluni

我不會用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

來源

2011-09-03 17:26:05 animuson

在每個INPUT中放置一個帶有「寬度：49％」（或左右）的TD似乎也可以工作。它更乾淨，但也更脆弱。 – leonbloy

當您使用寬度時，如果您沒有使用精確的數量，任何方法都很脆弱。 – animuson

單元格中還有文字時，這不起作用 –

如何使用CSS讓一個或多個元素填充剩餘空間？

回答

相關問題