内联显示单选按钮

【问题标题】：Display radio buttons inline内联显示单选按钮
【发布时间】：2013-06-04 08:39:04
【问题描述】：

我正在尝试使用 Rails 4 在 jQuery 移动表单中内联显示单选按钮。单选按钮标签的格式与其他输入字段标签不同，并且按钮显示在单独的行上。如何在一行中显示标签和按钮。按钮也是页面的整个宽度，而不是刚好足以容纳标签。

<div>  
  <%= f.label :boss %>
  <%= f.radio_button :boss, false %>
  <%= f.label :boss, 'No', :value => false %>
  <%= f.radio_button :boss, true %> 
  <%= f.label :boss, 'Yes', :value => true %>
</div>

【问题讨论】：

标签： ruby-on-rails jquery-mobile

【解决方案1】：

您必须将它们包装到具有 data-tape="horizontal" 属性的字段集中：

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal:</legend>
    <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
    <label for="radio-choice-h-2a">One</label>
    <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio">
    <label for="radio-choice-h-2b">Two</label>
    <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio">
    <label for="radio-choice-h-2c">Three</label>
</fieldset>

工作示例：http://jsfiddle.net/Gajotres/e4cWr/

【讨论】：