表单中的标签/输入固定流体布局答案

【问题标题】：Label/input fixed-fluid layout in forms表单中的标签/输入固定流体布局
【发布时间】：2014-07-14 06:22:00
【问题描述】：

我正在尝试解决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），并且布局应该只留给样式表。

有没有人知道如何在不添加非语义代码的情况下设置上面的 sn-p 样式？我认为关键应该是告诉input占用剩余的行空间，避免在每次输入后使用<br/>之类的东西。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

这很好。我想了想，但不幸的是，IE8 不支持计算：link。无论如何，这可能是一个非常挑剔的反对意见，而您的回答非常好。
@Giorgio 是的，即使相当不错的支持也没有那么远......你可以在没有 calc() 函数的情况下做到这一点，但它涉及将输入包装在 span 元素中，女巫不会'这似乎是你的目标。
是的，你又是对的@web-tiki。我认为您的回答是解决我问题的最佳方法，我会接受。也许我会将标签和输入设置为仅适用于 IE8 用户的块（我认为没有 IE8 用户会抱怨它，嗯）。