Question

很抱歉这个令人困惑的标题，如果有人有一个更好地解释问题的标题，请编辑它。

我正在尝试使用浮点数创建输入表单。

jsfiddle：http://jsfiddle.net/7jtn507w/ HTML：

<div>
    <label class="Label"> label1 </label>
    <input type="text"class="inp1"/>
    <select class="select1">
        <option value="something"> something</option>
    </select>


    <label class="Label lbl2"> label2 </label>
    <select  class="select2">
        <option value="somethingelse">somethingelse</option>
    </select>
</div>

CSS：

.Label{
    float:left;
}
inp1{

    float:left;
}

我想要的是这个顺序第一行的“label1，inp1和select1”。然后按顺序在第二行“label2和select2”。

因为标签2，标签2移动到label1前面。

有人可以解释为什么会这样，以及如何解决？

感谢。

PS。我知道这可以通过在行之间添加<br />标签来完成，但在我看来我正在做的事情也应该工作，所以我想清楚我的概念为什么它不起作用以及如何使用它浮动。

Answer 1

"A floated box must have an explicit width..."如果未设置宽度，则结果可能无法预测。

在您的情况下，您应该将输入元素包含在div这样的

中

<div>
    <div class="input-row">
        <label class="Label"> label1 </label>
        <input type="text"class="inp1"/>
        <select class="select1">
        <option value="something"> something</option>
        </select>
        <div class="clearfix"></div>
    </div>

    <div class="input-row">  
        <label class="Label lbl2"> label2 </label>
        <select  class="select2">
        <option value="somethingelse">somethingelse</option>
        </select>
        <div class="clearfix"></div>
    </div>
</div>

这样，您将添加一个包含多个浮动子元素的块元素。将clearfix附加到每个输入行也是一个好主意。

.clearfix { clear: both; }

Answer 2

尝试关注

<强> FIDDLE

<div>
    <label class="Label"> label1 </label>
    <input type="text"class="inp1"/>
    <select class="select1">
        <option value="something"> something</option>
    </select>
</div>
      <div>  
    <label class="Label lbl2"> label2 </label>
    <select  class="select2">
        <option value="somethingelse">somethingelse</option>
    </select>
</div>

<强> CSS

.Label{
    float:left;
}
inp1{

    float:left;
}

Answer 3

您需要一些容器，例如p，其中包含input，select，label元素。由于所有这些元素都是inline元素，因此不需要在此使用float。检查 DEMO 。

<div>
     <p>
        <label class="Label"> label1 </label>
        <input type="text"class="inp1"/>
        <select class="select1">
         <option value="something"> something</option>
        </select>
    <p>
    <p>  
        <label class="Label lbl2"> label2 </label>
        <select  class="select2">
         <option value="somethingelse">somethingelse</option>
        </select>
    </p>
</div>

Answer 4

虽然其他答案都是正确的，但我会提到你可以用css做任何事情。

如果你告诉它，任何元素都可以成为一个块元素。

更改css会得到您要求的结果，如this fiddle

中所示

主要变化是使所有元素都阻止并提供宽度

label, input, select{
    float:left;
    display:block;
    width:30%;
}

一个棘手的问题是选择从不喜欢与其他表单元素相对应的宽度和高度，因此需要指定它们。

Answer 5

您对float做什么或可以做什么以及您应该（不）做什么的想法需要更新。但整个浮动故事太长了，不能在这里写下来，所以你必须自己谷歌。

然而，你的问题很容易解决：删除浮动声明并用这个div宽度限制替换它们：

div {
    300px;
}

请参阅edited Fiddle。

标签，输入和选择是内联元素，行为就像文本一样。

浮动两个相邻元素影响第四个元素

5 个答案: