jQuery Mobile Horizontal Fieldset - 布局问题

Question

使用 jQuery Mobile 1.1，我想水平布置 2 组不同的单选按钮，中间有一些文本。我的目标是 iPad，所以它的显示屏比手机宽。这是我正在尝试做的事情的 HTML，但它在屏幕上看起来像垃圾，两组单选按钮挤在一起，文本出现在所有内容的右侧：

<fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption1" checked="checked" />
        <label for="rdoOption1">Option 1</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption2" />
        <label for="rdoOption2">Option 2</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption3" />
        <label for="rdoOption3">Option 3</label>
        <label>Sort By:</label>
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortName" checked="checked" />
        <label for="rdoSortName">Name</label>
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortDept" />
        <label for="rdoSortDept">Department</label>
    </fieldset>

谢谢，

安迪

Answer 1

可能有点突兀，但是你有没有尝试过使用 3 列布局，像这样：

<div class="ui-grid-b">
<div class="ui-block-a">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption1" checked="checked" />
        <label for="rdoOption1">Option 1</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption2" />
        <label for="rdoOption2">Option 2</label>
        <input type="radio" name="rdoOptions" data-mini="true" id="rdoOption3" />
        <label for="rdoOption3">Option 3</label>
    </fieldset>
</div>
<div class="ui-block-b">
    <div style="padding-right:0.5em;text-align:right;">
        <label>Sort By:</label>
    </div>
</div>
<div class="ui-block-c">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortName" checked="checked" />
        <label for="rdoSortName">Name</label>
        <input type="radio" name="rdoSort" data-mini="true" id="rdoSortDept" />
        <label for="rdoSortDept">Department</label>
    </fieldset>
</div>

最初，我尝试使用 2 列布局：

<div class="ui-grid-a">
    <div class="ui-block-a">
        (first fieldset)
    </div>
    <div class="ui-block-b">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Sort By:</legend>
                <input type="radio" name="rdoSort" data-mini="true" id="rdoSortName" checked="checked" />
                <label for="rdoSortName">Name</label>
                ...
             </fieldset>
        </div>
    </div>
</div>

但是第二列没有将图例与单选按钮列表放在同一行。所以我尝试了 3 列选项。

希望这有帮助。

Answer 2

单选按钮需要严格强制才能与文本保持一致。在这个小提琴中，我申请了

显示：内联！重要；

到外部 div，然后

浮动：左；

到内部分区。

http://jsfiddle.net/den232/d56Vp/

祝你好运！

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
<div data-role="page" class="type-home">

<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-c" value="aa"  />
          <label for="radio-view-c">C1</label>
          <input type="radio" name="radio-view" id="radio-view-d" value="bb"  />
          <label for="radio-view-d">D1</label>
        </fieldset>
      </div>
    </div>

      <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>
    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">A1</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">B1</label>
        </fieldset>
      </div>
    </div>


  </li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-f" value="aa"  />
          <label for="radio-view-f">A3</label>
          <input type="radio" name="radio-view" id="radio-view-g" value="bb"  />
          <label for="radio-view-g">B3</label>
        </fieldset>
      </div>
    </div>

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">AA</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">BB</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="e2" class='miniinputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->