如何将html列宽修复为其内容的最大宽度？

概述我正在尝试为输入表单格式化表格,如下所示.该表看起来有点像这样： Name:Time of day: 依此类推,其中每个字段标签后面跟着输入字段. 我的目标是有一个包含两列的表,一列用于字段标签,另一列用于输入字段,这样： >左列的大小由最长的字段标签自动确定,因此字段标签永远不会被包裹. >输入字段本身尽可能向右扩展. 我当然知道我可以将左栏固定为例如20em长,另一列100％,但这不是我要求 我正在尝试为输入表单格式化表格,如下所示.该表看起来有点像这样：

name:Time of day:

依此类推,其中每个字段标签后面跟着输入字段.
我的目标是有一个包含两列的表,一列用于字段标签,另一列用于输入字段,这样：

>左列的大小由最长的字段标签自动确定,因此字段标签永远不会被包裹.
>输入字段本身尽可能向右扩展.

我当然知道我可以将左栏固定为例如20em长,另一列100％,但这不是我要求的 – 我不想测量然后输入像20em那样的固定宽度;我希望宽度自动从该列中最长项目的宽度派生.这听起来像是一个相当普遍的愿望;有没有办法简单地做到这一点？

解决方法 使用白色空间：nowrap; CSS样式,如下面的代码所示.当然,您需要在两列之间添加边距或填充,以便不对输入框按下冒号(:). jsFiddle example of the code below

HTML：

<table >    <tr>        <td >name:</td>        <td><input type="text" /></td>    </tr>    <tr>        <td >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;   }

总结

以上是内存溢出为你收集整理的如何将html列宽修复为其内容的最大宽度？全部内容，希望文章能够帮你解决如何将html列宽修复为其内容的最大宽度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。