内联显示单选按钮

时间:2013-06-04 08:39:04

标签: ruby-on-rails jquery-mobile

我正在尝试使用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>

1 个答案:

答案 0 :(得分: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/