CSS 可变宽度元素来填充空间

发布于 2024-09-04 13:10:36 字数 499 浏览 5 评论 0原文

在表单中，我希望输入：文本填充表单标签左右对齐后的剩余空间。

标签有很多字符，所以我无法在标签上设置固定宽度。

代码示例：

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

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

谢谢。

原文

In a form, I would like the input:text to fill the remain space after the label to the form is left and right justified.

The label have number of characters so I can't set a fixed width on the label.

Code example:

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

How can I style the input to fill the remaining space after the text.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深空失忆 2024-09-11 13:10:36

<!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

<!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>

Won't work in older browsers.

LE: if you don't need/want/have to support old browsers such as IE 6 and 7, use this code. Otherwise, use JavaScript. Ooor use this code an throw in some JavaScript for IE 6 and 7. Yeah, I think that's the best way to do it :D

回复收藏 0 原文

心凉怎暖 2024-09-11 13:10:36

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

I posted this in a comment first, but was advised to post as an answer instead. This is not a CSS solution, but a table-based one. However, it should work on all browsers (though I didn't test this). span inside label's td is needed to workaround IE's bug of not applying white-space: nowrap to table cells.

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

回复收藏 0 原文