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

很抱歉标题混乱，如果有人的标题能更好地解释问题，请编辑它

我正在尝试创建一个带有浮动的输入表单

jsfiddle： HTML:

我想要的是按此顺序在第一行上显示“label1、inp1和select1”。然后按此顺序在第二行上选择“label2并选择2”

由于soe原因，label2在label1前面移动

有人能解释为什么会发生这种情况以及如何解决吗

谢谢

注：我知道这可以通过在行之间添加一个

标记来实现，但在我看来，我正在做的事情也应该起作用，因此我想澄清我的概念，即为什么它不起作用，以及如何使用浮动来实现它。

如果没有设置宽度，结果可能无法预测

在您的情况下，您应该像这样将输入元素封装在

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>

试着跟随

<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>

---

您需要一些容器，如

p

，其中将包含

输入

，

选择

，

标签

元素。因为所有这些元素都是

内联的
元素，所以这里不需要使用
float
。选中

<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>



标签1
某物


标签2
某物

尽管其他答案都是正确的，但我认为这是一个很好的补充，可以说明你可以用css做任何事情

如果您告诉任何元素，它都可以成为块元素

稍微更改css会得到您要求的结果，如中所示

主要的变化是使所有元素都阻塞并提供一个宽度

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

一件棘手的事情是，与其他表单元素相比，select永远不喜欢与它们的宽度和高度保持一致，因此需要指定它们。
您对
float
做什么或可以做什么的想法，以及您应该（不）用它做什么需要更新。但是整个浮动的故事太长了，不能写在这里，所以你必须自己用谷歌搜索

但是，您的问题很容易解决：删除float声明，并使用此div width限制替换它们：

div {
    300px;
}

看

标签、输入和选择是内联元素，其行为与文本类似
 您需要一些容器，如
p
，其中将包含您的
标签
输入
和
选择
元素。这样地。您有两个多选项，第一个是您可以定义的。select1{float:left；}Demo是“浮动元素会导致其阻塞消失。”什么？不，如果有什么区别的话，浮动元素强制它成为一个块。我这里的意思是，除非明确地这样做，否则浮动元素不会自动扩展到整个宽度。不是吗？如果我对您的HTML有错误，请纠正我，您不再需要浮动：。
.Label{
    float:left;
}
inp1{

    float:left;
}

<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>

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

div {
    300px;
}