CSS可变宽度元素填充空间答案

【问题标题】：CSS variable width element to fill in spaceCSS可变宽度元素填充空间
【发布时间】：2011-02-28 04:07:29
【问题描述】：

在表单中，我希望 input:text 填充表单标签左右对齐后的剩余空间。

标签有字符数，所以我不能在标签上设置固定宽度。

代码示例：

<fieldset>
<legend>User Info</legend>
<p><label>First Name :</label><input type="text"...></p>
<p><label>Last Name : </label><input type="text"...></p>
<p><label>Completed Email Address :</label><input type="text"...></p>
</fieldset>

如何设置输入样式以填充文本后的剩余空间。

谢谢。

【问题讨论】：

好吧，你可以giveupandusetables.com
@doublep，如何使用表格更接近解决 OP 的问题？
@jeroen：pastebin.com/vpXN0TsM。应该适用于所有浏览器，与答案不同。
@doublep：是的，如果您使用绝对 URL，它也应该在所有电子邮件客户端中都能很好地显示
@doublep：令人印象深刻，这是我没想到的 :-)

标签： javascript css layout width

【解决方案1】：

<!doctype html>
<html>
<head>
    <style>
        .grid { width: 100%; display: table; table-layout: auto; }
        .row { display: table-row; }
        label.cell { white-space: nowrap; display: table-cell; }
        span.cell { width: 100%; display: table-cell; }
        span.cell input { width: 100%; display: block; }
    </style>
</head>
<body>
    <fieldset>
        <legend>User Info</legend>
        <div class="grid">
            <div class="row"><label class="cell">First Name:</label> <span class="cell"><input type="text" /></span></div>
        </div>
        <div class="grid">
            <div class="row"><label class="cell">Last Name:</label> <span class="cell"><input type="text" /></span></div>
        </div>
        <div class="grid">
            <div class="row"><label class="cell">Completed Email Address:</label> <span class="cell"><input type="text" /></span></div>
        </div>
    </fieldset>
</body>
</html>

不适用于旧版浏览器。

LE：如果您不需要/想要/必须支持旧浏览器，例如 IE 6 和 7，请使用此代码。否则，请使用 JavaScript。 Ooor 使用此代码为 IE 6 和 7 添加一些 JavaScript。是的，我认为这是最好的方法：D

【讨论】：

感谢您的所有帮助。我试试看。
如果省略 table-row 容器，是否有任何现代非 IE 浏览器（IE9 除外）无法实现此功能？我在 table 元素下直接有 table-cell 元素，它工作得很好。

【解决方案2】：

我首先在评论中发布了这个，但被建议作为答案发布。这不是 CSS 解决方案，而是基于表格的解决方案。但是，它应该适用于所有浏览器（尽管我没有对此进行测试）。需要span inside label's td 来解决 IE 未将white-space: nowrap 应用于表格单元格的错误。

<table width="100%">
  <tr>
    <td width="1"><span style="white-space: nowrap;">First name:</span></td>
    <td><input style="width:100%"/></td>
  </tr>
</table>
<table width="100%">
  <tr>
    <td width="1"><span style="white-space: nowrap;">Last name:</span></td>
    <td><input style="width:100%"/></td>
  </tr>
</table>
<table width="100%">
  <tr>
    <td width="1"><span style="white-space: nowrap;">Completed Email Address:</span></td>
    <td><input style="width:100%"/></td>
  </tr>
</table>

【讨论】：

【解决方案3】：

您可以尝试在左侧（或右侧）使用浮点数，并“块格式化上下文”对右侧项目。

Read about block formatting contexts in css at the YUIblog

小提琴：http://jsfiddle.net/uS3Cv/1/

【讨论】：

这如何满足OP“填充标签后剩余空间”的要求？
是的 :) 不错。它的向后兼容性如何？
IE6 在 BFC 化元素具有边距/填充/边框（BFC 低于浮动）或 BFC 的内容增长太宽时会出现问题，在这种情况下，您可以使用三个元素而不是一个:

。不知道能不能简化。