右端带有按钮的单选按钮组答案

【问题标题】：Radio button group with button at the right end右端带有按钮的单选按钮组
【发布时间】：2015-10-14 11:19:33
【问题描述】：

我是 jquery 新手，遇到了一个问题

可能重复

jQuery Mobile buttons on same row as controlgroup 但是提供的解决方案对我不起作用。

我正在尝试使用右侧带有按钮的 jqm 创建一个无线电控制组。我正在创建单选按钮。像这样：-

 <fieldset data-role="controlgroup" id="privacylistdata" 
                data-theme="c" class="ui-grid-a">

                <label for="Setting1">Setting1</label> <input class="privacytype"
                    type="radio" name="privacy" id="Setting1"
                    value="Setting1"> 

                  <label for="Setting2">Setting2</label> <input
                    class="privacytype" type="radio" name="privacy"
                    id="Setting2" value="Setting2">

                   <label for="Setting3">Setting3</label> <input
                    class="privacytype" type="radio" name="privacy"
                    id="Setting3"
                    value="Setting3">
            </fieldset>

我喜欢像这样在同一行的每个无线电控制组的最右侧添加一个按钮。

请帮帮我。

谢谢。

【问题讨论】：

标签： jquery-mobile controls radio-group

【解决方案1】：

做到这一点的一种方法是必须使用表格并排控制组：

    <table class="privacylistdatatable">
        <tr>
            <td>
                <fieldset data-role="controlgroup" id="privacylistdata" data-theme="c">
                    <label for="Setting1">Setting1</label>
                    <input class="privacytype" type="radio" name="privacy" id="Setting1" value="Setting1">
                    <label for="Setting2">Setting2</label>
                    <input class="privacytype" type="radio" name="privacy" id="Setting2" value="Setting2">
                    <label for="Setting3">Setting3</label>
                    <input class="privacytype" type="radio" name="privacy" id="Setting3" value="Setting3">
                </fieldset>
            </td>
            <td class="rightColumn">
                <fieldset data-role="controlgroup" id="privacylistdataBtns" data-theme="c"> 
                   <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Icon only</a>
                   <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Icon only</a>
                   <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Icon only</a>
                </fieldset>
            </td>
        </tr>
    </table>

然后使用一些 CSS 让事情排列整齐：

.privacylistdatatable {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.privacylistdatatable td {
    padding: 0px;
}
.privacylistdatatable .rightColumn {
    width: 24px;
}
.privacylistdatatable fieldset {
    margin: 0;
}
#privacylistdata .ui-radio label {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#privacylistdataBtns .ui-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
}
#privacylistdataBtns .ui-btn-inner {
    padding-top: 9px;
    padding-bottom: 9px;
}
#privacylistdataBtns .ui-last-child .ui-btn-inner {
    padding-top: 9px;
    padding-bottom: 9.5px;
}

DEMO

【讨论】：

谢谢ezanker，这正是我所需要的:)