0

我正在尝试设置如下登录输入字段的样式，并且通过检查实时元素获得了预期的结果，但我不太了解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>

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

有人可以解释为什么float需要在这里实现这一目标吗？

这是JSFiddle

4

2 回答 2

1

wrap-input 是浮动的，因此它会相互粘连。接下来，元素被显示块，以便可以设置宽度；然后作者将 wrap-input 的宽度设置为 100%。这意味着包装器的宽度。因此，wrap-inputs 没有空间位于同一行，因此第二个输入只是转到下一行。

由于它们是浮动的，因此它们会相互粘连。这就是整个概念。

如果没有浮动，则必须明确设置高度和宽度以及边距。

于 2013-10-09T12:05:42.570 回答
0

我刚刚消除了这两个float'，至少在 Chrome 中，您仍然可以获得您正在寻找的基本外观和感觉。有关工作示例，请参见http://jsfiddle.net/designingsean/zVqE2/5/ 。

他们似乎在做的唯一一件事就是阻止input's 运行页面的宽度。这可以通过width在类上设置属性.wrapper或仅使用 Bootstrap 的内置类之一来轻松解决（请参阅文档）。

于 2013-10-09T11:57:54.710 回答