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包裹在元素中。

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

Answer 2

您是否尝试过CSS3计算功能？ 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; }

输入文本填满剩余空间

3 个答案: