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

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没有在元素之间正确包装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（请参阅此 JSfiddle的演示）。IMO，这是一个比gilly3 建议的包装更优雅和语义的解决方案，这就是为什么我决定发布，即使你已经接受了答案。span