html - 使多个文本输入字段看起来与 float 属性(css，bootstrap)相结合

Question

我正在尝试设计如下登录输入字段的样式 我通过检查实时元素得到了预期的结果 但我不太明白 float 属性在这里的用法。

使用 Bootstrap，html 看起来是这样的

<div class="wrapper">
    <div class="wrap-input">
        <input class="input-block-level" type="text" placeholder="username"></input>
    </div>
    <div class="wrap-input">
        <input class="input-block-level" type="text" placeholder="password"></input>
    </div>
</div>
<button class="btn">test</button>

这里我有 wrapper 和 float: left 嵌套 wrap-input 也有 float: left .

有人可以解释一下为什么这里需要 float 来实现这一点吗？

Here is JSFiddle

Answer 1

wrap-input 是 float 的，因此它们相互粘在一起。 接下来，元素被显示为 block ，以便可以设置宽度； 然后作者将 wrap-input 的宽度设置为 100%。这意味着宽度 wrapper 。所以换行输入没有空间在同一行 所以第二个只是转到下一行。

因为它们是漂浮的，所以它们会粘在一起。这就是整个概念。

如果没有 float ，高度和宽度必须明确设置，边距也必须设置。