输入文字填满剩余空间

Question

我已经环顾四周大约一个小时了。我似乎不知道我必须做什么。 我想做的是一个登录表单。我希望跨度和输入彼此相邻。输入必须填充整个尺寸。 这是我的代码：

<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。跨度有一定的宽度，比如说 100px。然后我想要输入获取剩余空间。 我想在不硬编码宽度的情况下实现这一切。

有什么想法吗？

Answer 1

您可以使用

float

和布局属性。将您的

input

包装在一个元素中。

演示

---

您的

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：

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 */
}

Answer 2

您尝试过 CSS3 的 calc 功能吗？ https://developer.mozilla.org/en-US/docs/Web/CSS/calc

.login_span {width:100px; display:inline-block; }
.login_input {width:calc(100% - 120px); display:inline-block;}

小提琴：http://jsfiddle.net/bW3ak/

Answer 3

无需硬编码宽度即可实现：

#login_nav li { display: table; width: 100%; }
#login_nav li span,
#login_nav li input { display: table-cell; }