JQuery Mobile Listview 两侧的单选按钮

Question

我一直在使用 JQM 中的各种布局，尝试在每个列表行的左侧和右侧设置一个带有单选按钮的列表。我希望它看起来像 JQM 单选选项的标准垂直列表，除了中间的文本和左右两侧的单选按钮。

不幸的是，到目前为止我尝试过的方法看起来并不太令人印象深刻。这是第一种方法，显示使用字段集 data-type="horizo​​ntal" ：

<div data-role="content"> 
    <fieldset data-role="controlgroup" data-type="horizontal">
            <input type="radio" name="radioleast" id="radio-l1"/>
            <label for="radio-l1" id="desc-l1"><span style="display: block" class="ui-icon ui-icon-check">&nbsp;</span></label>


            <input type="radio" name="radioleast" id="radio-l4" />
            <label for="radio-l4" id="desc-l1"><span style="display: block" class="ui-icon ui-icon-check">&nbsp;</span></label>
    </fieldset>
</div>

但是我不能让它拉伸整个页面，或者把我需要的文本放在中间。

这是使用 JQM 列表视图的第二种方法：

<ul data-role="listview">
  <li>
      <div class="ui-grid-b">
        <div class="ui-block-a">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <input type="radio" name="radioleast" id="radio-l1"/>
                    <label for="radio-l1" id="desc-l1"><span style="display: block" class="ui-icon ui-icon-check">&nbsp;</span></label>
                </fieldset>
        </div>
        <div class="ui-block-b">The description Text</div>
        <div class="ui-block-c">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <input type="radio" name="radioleast" id="radio-l1"/>
                    <label for="radio-l1" id="desc-l1"><span style="display: block" class="ui-icon ui-icon-check">&nbsp;</span></label>
                </fieldset>
        </div>
        </div>
  </li>
</ul>

这种方法的问题是间距 - 太多了。

对解决此问题的最佳方法有什么建议吗？提前感谢您的任何提示。

编辑

感谢您迄今为止的回复。我想理想情况下我正在寻找的是我的第一个示例，但是在两个单选按钮之间有一个空格（理想情况下是一个按钮），这迫使按钮位于页面的最左侧和最右侧，所有内容都组合在一起以提供它工具栏外观：

<div data-role="content"> 
    <fieldset data-role="controlgroup" data-type="horizontal">
            <input type="radio" name="radioleast" id="radio-l1"/>
            <label for="radio-l1" id="desc-l1"><span style="display: block" class="ui-icon ui-icon-check">&nbsp;</span></label>

            <span data-role="button">How can I get this to stretch to the page width?</span>

            <input type="radio" name="radioleast" id="radio-l4" />
            <label for="radio-l4" id="desc-l1"><span style="display: block" class="ui-icon ui-icon-check">&nbsp;</span></label>
    </fieldset>
</div>

希望这会有所帮助。

（编辑 - 插入按钮再更新一次）

Answer 1

这是你要找的吗？

                 <div data-role="content">
          <fieldset data-role="controlgroup" data-type="horizontal">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td><input type="radio" name="radioleast" id="radio-l1"/></td>
                <td><label for="radio-l1" id="desc-l1" ><span style="display: block;" class="ui-icon ui-icon-check">where is this</span></label></td>
                <td align="center"><span data-role="button" style="display:block; width:100%; margin: 0 auto;">How can I get this to stretch to the page width?</span></td>
                <td><label for="radio-l4" id="desc-l1"><span style="display: block;" class="ui-icon ui-icon-check">what is this</span></label></td>
                <td><input type="radio" name="radioleast" id="radio-l4" style="float:right;" /></td>
              </tr>
            </table>
          </fieldset>
        </div>

Answer 2

不是超级干净的解决方案，但这可能对您有用：DEMO FIDDLE

我在 CSS 中使用了一些绝对定位来实现中间按钮的拉伸，同时将收音机保持在极左和极右。您可以使用实际的 css 值来使它们适用于您的确切按钮：

<div data-role="controlgroup" data-type="horizontal" class="TheContainer">
    <input type="radio" name="radio-choice-b" id="radio-choice-c" value="list" checked="checked" data-corners="none" />
    <label for="radio-choice-c">Left</label> 

    <a data-role="button" class="midButton" data-role="button" data-corners="false">stretch to the page width?</a> 

    <input type="radio" name="radio-choice-b" id="radio-choice-e" value="gallery" />
    <label for="radio-choice-e">Right</label>
</div>

.TheContainer {
    height: 20px;
}
.TheContainer .midButton {
    position: absolute;
    top: 7px;
    left: 87px;
    right: 87px;
}
.TheContainer .ui-radio {
    position: absolute;
    top: 7px;
    margin-left: 15px;
    margin-right: 15px;
}
.TheContainer .ui-radio:first-child {
    left: 0px;
}
.TheContainer .ui-radio:last-child {
    right: 0px;
}

在评论后更新以使 LI 不那么高。