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

Question

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

这是我的代码示例：

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

这里是一些 CSS：

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

Answer 1

标签元素之间的空白占用空间，阻止元素并排出现。把它注释掉，它就可以工作了：

http://tinker.io/5e4b9

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