jquery - 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>

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

这是使用 JQM Listview 的第二种方法:

<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

这不是一个 super 干净的解决方案，但这可能对你有用: DEMO FIDDLE

我在 CSS 中使用一些绝对定位来实现中间按钮的拉伸(stretch)，同时将 radio 保持在最左边和最右边。您可以使用实际的 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 不那么高。