使多个文本输入字段与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。{/ p>

有人可以解释一下为什么{{1}}必须达到此目的吗？

Here is JSFiddle

Answer 1

包裹输入被浮动，以便它彼此粘在一起。 接下来，元素被显示块，以便可以设置宽度; 然后，作者将wrap-input的宽度设置为100％。这意味着宽度 包装。所以包装输入没有空间在同一条线上 所以第二个就到了下一行。

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

没有浮动，高度和宽度也必须设置明确和边距。

Answer 2

我刚刚删除了float两个，你仍然可以获得基本的外观和感觉，至少在Chrome中是这样。有关工作示例，请参阅http://jsfiddle.net/designingsean/zVqE2/5/。

他们似乎唯一要做的就是让input不要运行页面的宽度。这可以通过在width类上设置.wrapper属性，或者只使用Bootstrap的内置类之一（参见文档）来轻松解决。