在换行符上保留带有标签的单选按钮 [英] Keep radio buttons with their labels on line breaks

问题描述

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

我确实希望标签内嵌，这样本节不会有7个换行高度，但我想知道如何确保单选按钮保留其标签。

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

如果您有这种习惯用法，请告诉我。

解决方案

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

 < div class =radios> 
< span> 
< input type =radioid =productTypeRC/> 
< label for =productTypeRC> RC< / label> 
< / span> 
 ... 
< / div> 
  

CSS：

  .radios>跨越
 {
 white-space：nowrap; 
} 
  

编辑：上述技术存在bug在Chrome中，对不包裹，而是隐藏。这个错误在问题中得到了证明，该文件在包含 white-space：nowrap 。解决方案包括使用 float：left ，并添加一些边距以弥补折叠间距，或者在HTML工作之前尽量使用HTML。如果您只是将< input> 和< label> 与<$ c $

 < div class =radioos>< span>  ; 
< span>< input type =radioid =productTypeRC/> < label for =productTypeRC> RC< / label>< / span> 
< span>< input type =radioid =productTypeTC/> < label for =productTypeTC> TC< / label>< / span> 
< span>< input type =radioid =productTypeNS/> < label for =productTypeNS> NS< / label>< / span> 
 ... 
< / div> 
  

jsfiddle.net/Z5uaT/57

I have an HTML form with sections laid out like this:

I do want the labels to be inline so that this section won't be 7 line breaks tall, but I would like to know how I can make sure the radio buttons stay with their labels.

Note: the labels are of varying lengths and are populated dynamically with data from the server, so I can't set a fixed width div without causing some weird spacing issues.

If there is an idiomatic way of doing this, please show me.

解决方案

Put each input/label pair in a span, then set white-space: nowrap on the span. Something like this:

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

CSS:

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

Edit: The above technique suffers from a bug in Chrome where the pairs don't wrap and instead are hidden. This bug is demonstrated in the question Text doesn't wrap properly between elements having white-space: nowrap. Solutions include using float: left with some margin added to make up for collapsed spacing, or to muck with the HTML until it works. If you just put the <input> and <label> as the same line as the <span>, it works.

<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

这篇关于在换行符上保留带有标签的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！