Question

我想将2个控制组与jQuery Mobile对齐。我使用版本1.4.2。

这就是我所拥有的：http://i.stack.imgur.com/qEAav.png

这就是我想做的事：http://i.stack.imgur.com/NA9YR.png

我目前的代码是：

<h3 class="ui-bar ui-bar-a ui-corner-all">
        <div id="btnPaie" align="center">
            <a href="" id="closeListEmployee" class="ui-btn ui-corner-all ui-btn-inline ui-mini">Fermer la liste</a>
            </br>
            <form>
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
                    <input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
                    <label for="loadEffectif">Age</label>
                    <input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
                    <label for="loadAnciennete">Ancienneté</label>
                </fieldset>
            </form>
            <form>
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
                    <input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
                    <label for="loadEffectif2">Effectif</label>
                    <input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
                    <label for="loadEPT">ETP</label>
                </fieldset>
            </form>
        </div>
    </h3>

如果有专业jQuery Mobile，我很乐意解决我的问题。

提前致谢。

Answer 1

看看这是否适合你：

<h3 class="ui-bar ui-bar-a ui-corner-all">
    <div id="btnPaie">
        <form>
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
                <input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
                <label for="loadEffectif2">Effectif</label>
                <input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
                <label for="loadEPT">ETP</label>
            </fieldset>
        </form>
        <form>
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
                <input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
                <label for="loadEffectif">Age</label>
                <input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
                <label for="loadAnciennete">Ancienneté</label>
            </fieldset>
        </form>
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
            <a href="" id="closeListEmployee" class="ui-btn ui-corner-all ui-btn-inline ui-mini">Fermer la liste</a>
        </fieldset>
    </div>
</h3>

用于排队的CSS并添加间距：

#btnPaie {
    text-align: center;
}
#btnPaie form, #btnPaie fieldset {
    display: inline;
}
#btnPaie fieldset {
    margin: 1em;
}

<强> DEMO

设置内联2控制组jQuery Mobile

1 个答案: