如何將html列寬修復爲其內容的最大寬度？

我想爲輸入表格格式化如下。該表看起來有點像這樣：如何將html列寬修復爲其內容的最大寬度？

 Name: 
Time of day:

等等，其中每場的那些標籤，隨後是輸入字段正確。我的目標是有一個表有兩列，一爲字段標籤，其他爲輸入字段，使得：

左欄的大小自動最長的字段標籤決定的，所以該字段標籤永遠不會纏繞。
輸入字段本身儘可能地向右延伸。

我知道當然，我可以固定左欄是例如20em長，另一列100％，但這不是我所要求的 - 我不想測量，然後輸入固定的寬度，如20em;我希望寬度自動從該列中最長項目的寬度派生。這聽起來像是一個相當普遍的願望;有沒有辦法做到這一點？

來源

2011-09-01 Luca de Alfaro

歡迎堆棧溢出！如果您的問題的任何答案都有幫助，請鼓勵通過點擊向上箭頭給他們一個upvote。當您的問題得到解答後，請點擊該答案旁邊的複選標記，將相應的答案標記爲「正確」。 –

使用white-space: nowrap; CSS樣式，如下面的代碼。當然，您需要在兩列之間添加邊距或填充，以便不會在輸入框中按冒號（:）。 jsFiddle example of the code below

HTML：

<table class="fullWidth"> 
    <tr> 
     <td class="nowrap">Name:</td> 
     <td><input type="text" /></td> 
    </tr> 
    <tr> 
     <td class="nowrap">Time of Day:</td> 
     <td><input type="text" /></td> 
    </tr> 
</table>

CSS：

.nowrap { 
    white-space: nowrap; 
    width: 1px; 
} 

.fullWidth { 
    width: 100%; 
} 

input { 
    width: 100%; 
    display: block; 
}

來源

2011-09-01 01:21:42

如何將html列寬修復爲其內容的最大寬度？

回答

相關問題