html - 输入文字填满剩余空间

我一直在寻找一个小时左右。而且我似乎找不到我要做的事情。
我要制作的是一个登录表单。我想要跨度和输入彼此相邻。输入必须填满整个大小的地方。
这是我的代码：

<div id="login_div">

<form>

    <ul id="login_nav">
        <li>
            <span class="login_span">Username</span>
            <input class="login_input" type="text" name="username" />

        </li>

        <li>
            <span class="login_span">Password</span>
            <input class="login_input" type="password" name="password"/>
        </li>

        <li>
            <input type="submit" value="Login" />
        </li>

    </ul>

</form>

<li>必须是login_div的整个宽度，比方说500px。跨度有一定的宽度，可以说100像素。然后，我希望输入获得剩余空间。
我想实现所有这些而无需对宽度进行硬编码。

有任何想法吗？

最佳答案

您可以使用float和布局属性。将input包装在一个元素中。

DEMO



您的span应该是label，如果input包裹在span中，则可以使label浮动。

如果触发了布局，则span（或其他标记）可以使用所有可用的剩余空间**，因此它关心浮动元素**。

此时，您只需将width: 100%设置为input即可填充剩余的所有空间：

<div id="login_div">
<form>
    <ul id="login_nav">
        <li>
            <label class="login_span">Username</label>
            <span class="login_span"><input class="login_input" type="text" name="username" /></span>
        </li>
        <li>
            <label class="login_span">Password</label>
            <span class="login_span"><input class="login_input" type="password" name="password"/></span>
        </li>
        <li>
               <input type="submit" value="Login" />
        </li>

    </ul>
</form>

和基本的CSS：l

label{
  float:left;
  width:100px;/* option, whatever */
  }
span {
  display:block;
  overflow:hidden;/* triggers layout, so doesnt show beneath float element */
  margin-right:1em;/* option, whatever */
}
span input {
  width:100%;/* use all space avalaible */
  box-sizing:border-box;/* use prefix where needed */
}

关于html - 输入文字填满剩余空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23394425/