Question

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

不幸的是，到目前为止我尝试过的方法并不令人印象深刻。这是第一种方法，显示使用字段集data-type =“horizontal”：

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

不是一个超级干净的解决方案，但这可能适合您： 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;
}

评论后更新，使李不高。

Answer 2

这是你在找什么？

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

JQuery Mobile Listview两侧的单选按钮

2 个答案: