CSS可变宽度元素填充空间
Posted
技术标签:
【中文标题】CSS可变宽度元素填充空间【英文标题】：CSS variable width element to fill in space 【发布时间】：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：令人印象深刻，这是我没想到的 :-) 【参考方案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 >
<tr>
<td ><span style="white-space: nowrap;">First name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table >
<tr>
<td ><span style="white-space: nowrap;">Last name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table >
<tr>
<td ><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 的内容增长太宽时会出现问题，在这种情况下，您可以使用三个元素而不是一个: 。不知道能不能简化。以上是关于CSS可变宽度元素填充空间的主要内容，如果未能解决你的问题，请参考以下文章