1

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>

ありがとう、

アンディ

4

2 に答える 2

0

少し目障りかもしれませんが、次のような 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>

しかし、2 番目の列は凡例をラジオ ボタン リストと同じ行に配置していませんでした。そこで、3列オプションを試しました。

お役に立てれば。

于 2012-07-27T16:43:10.763 に答える
0

ラジオ ボタンは、テキストとインラインのままにするために深刻な強制が必要です。このフィドルで私は適用しました

表示:インライン!重要;

外部のdivに、次に

フロート:左;

内部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 -->

于 2012-10-23T20:33:09.530 に答える