将单选按钮与标签保持在换行符上

Question

我有一个HTML表单，其中的部分如下所示：

我确实希望标签内联，以便此部分不会有7个换行符，但我想知道如何确保单选按钮与标签保持一致。

注意：标签长度不一，并且使用来自服务器的数据动态填充，因此我无法设置固定宽度div而不会导致一些奇怪的间距问题。

如果有这种惯用方式，请告诉我。

Answer 1

将每个输入/标签对放在一个范围内，然后在范围上设置white-space: nowrap。像这样：

<div class="radios">
    <span>
        <input type="radio" id="productTypeRC" />
        <label for="productTypeRC">RC</label>
    </span>
    ...
</div>

CSS：

.radios > span
{
    white-space: nowrap;
}

编辑：上述技术遭遇Chrome中的错误，其中对不会换行而是隐藏。问题Text doesn't wrap properly between elements having white-space: nowrap中演示了此错误。解决方案包括使用float: left添加一些边距以弥补折叠的间距，或者使用HTML进行粘贴直到它工作。如果您只是将<input>和<label>与<span>放在同一行，那就可以了。

<div class="radios">
    <span><input type="radio" id="productTypeRC" /> <label for="productTypeRC">RC</label></span>
    <span><input type="radio" id="productTypeTC" /> <label for="productTypeTC">TC</label></span>
    <span><input type="radio" id="productTypeNS" /> <label for="productTypeNS">NS</label></span>
    ...
</div>

jsfiddle.net/Z5uaT/57

Answer 2

将复选框放在标签内（是的，这是有效的）并制作标签inline-block（有关演示，请参阅this JSfiddle）。 IMO，这是一个比span包裹suggested by gilly3更优雅和语义的解决方案，这就是为什么我决定发帖，即使你已经接受了答案。