Html 将包含动态调整大小的输入元素的内联标签定位到表单中

我有一个表单，在标签标签中有一些输入标签。输入显示在标签下面。我希望根据表单的宽度动态调整输入/标签的大小。问题是，如果我告诉标签占据表单100%的宽度，最后一个输入标签就会进入下一行

下面是我的代码示例：

    <form action="">
        <label>Label1:<br>
            <input type="text"></label>
        <label>Label2:<br>
            <input type="text"></label>
    </form>

---

标签元素之间的空白会占用空间，防止元素并排出现。把它注释掉，它就会起作用：

标签1:

标签2:

很好，额外的空白导致了问题。然而，额外的评论看起来有点脆弱。如果你对评论感到不舒服（尽管它没有脆弱之处），有其他方法可以有效地删除空间。您可以将元素浮动或设置为表格单元格，而不是将其设置为内联块：。实际上，输入字段的100%宽度存在一个问题（不是您的问题），这会导致它溢出到右侧并越过右侧边框。就我个人而言，我会将元素的宽度设置为49%并使用它。这是因为输入元素上有填充，所以它们是100%宽+填充。调整框大小可以解决这个问题：我添加了-moz框大小，以便在Firefox中看到它。效果很好+1.

    form {
        width:60%;
        border:1px solid indigo;
    }
    label{
        display:inline-block;
        margin:0;
        width:50%;
    }
    input{
        width:100%
    }

<form action="">
    <label>Label1:<br>
        <input type="text"></label><!--
    --><label>Label2:<br>
        <input type="text"></label>
</form>