Question

在表单中，我想输入：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>

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

感谢。

Answer 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

Answer 2

我首先在评论中发布此内容，但建议将其作为答案发布。这不是CSS解决方案，而是基于表的解决方案。但是，它应该适用于所有浏览器（虽然我没有测试这个）。标签span内部需要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>

Answer 3

您可以尝试在左侧（或右侧）使用浮动，并在右侧项目中使用“阻止格式化上下文”。

Read about block formatting contexts in css at the YUIblog

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

CSS变量宽度元素填充空间

3 个答案: