如何将 html 列宽度固定为其内容的最大宽度？

Question

我正在尝试格式化输入表单的表格，如下所示。该表看起来有点像这样：

       Name:
Time of day:

等等，其中每个字段标签后面都跟着正确的输入字段。 我的目标是拥有一个包含两列的表，一列用于字段标签，另一列用于输入字段，这样：

• 左列的大小由最长的字段标签自动确定，以便字段标签永远不会环绕。
• 输入字段本身尽可能向右延伸。

我当然知道我可以将左列固定为 20em 长，另一列固定为 100%，但这不是我要的——我不想测量然后输入固定宽度，例如20em；我希望宽度自动从该列中最长项目的宽度导出。这听起来是一个相当普遍的愿望。有没有办法简单地做到这一点？

Answer 1

使用 white-space: nowrap; CSS 样式，如下面的代码所示。当然，您需要在两列之间添加边距或填充，这样冒号 (:) 就不会压在输入框上。 以下代码的 jsFiddle 示例

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;   
}