标签/输入固定流体布局的形式

Question

我正在尝试解决此original post中提出的问题。基本上，我想创建一个表格，其中标签和相关输入在同一行。标签具有固定的宽度，输入延伸到剩余的表格宽度。每个标签+输入对都有自己的行。

<form>
    <label for="name">Name:</label>
    <input id="name"/>

    <label for="email">Email:</label>
    <input id="email"/>
</form>

我已经阅读了this post中提出的解决方案，但我并没有让我信服。我认为它不是非常语义，因为它引入了formLine类。我可能非常挑剔，但我认为HTML代码应该只包含语义内容（在本例中为label和input），布局应仅留给样式表。

有没有人在不添加非语义代码的情况下对上面的代码段进行样式化？我认为关键应该是告诉input占用剩余的行空间，以避免在每次输入后使用<br/>之类的内容。

Answer 1

使用CSS calc();函数可以在不更改示例标记的情况下获得此行为：

<强> DEMO

label{
    display:inline-block;
    width:95px;
}
input{
    box-sizing:border-box;
    width:calc(100% - 100px);
}