如何将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列宽修复为其内容的最大宽度？

回答

相关问题