Question

我正在尝试使用JQuery Mobile设置页面，其中我有一个3列网格，带有标签，文本输入和一组水平对齐的单选按钮。由于某种原因，网格元素c将其高度设置为大于其他2，并且我似乎无法强制前2个单元格与其对齐。

以下是有问题的代码

<div data-role="page" id="page_fullDialog">
    <div id="dialog_main" data-role="content">
        <fieldset class="ui-grid-b">
            <div class="ui-block-a" style="width:30%">
                <label style="vertical-align:top" data-mini="true" for="leagueNameInput">League Name:</label>
            </div>
            <div class="ui-block-b" style="width:10%">
                <input type="text" style="vertical-align:top" data-mini="true" name="leagueNameInput" id="leagueNameInput" maxlength="4" value="" data-mini="true" />
            </div>
            <div class="ui-block-c" style="width:60%; text-align: right;">
                <div data-role="fieldcontain" data-mini="true">
                    <fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
                        <!-- <legend>Difficulty:</legend>  -->
                        <input type="radio" name="difficulty" id="difficultyEasy" value="choice-1" />
                        <label for="difficultyEasy">Easy</label>
                        <input type="radio" name="difficulty" id="difficultyMedium" value="choice-2" checked="checked" />
                        <label for="difficultyMedium">Medium</label>
                        <input type="radio" name="difficulty" id="difficultyHard" value="choice-2" />
                        <label for="difficultyHard">Hard</label>
                    </fieldset>
                </div>
            </div>
        </fieldset>
    </div>
</div>

对此的任何帮助将不胜感激。

Answer 1

出于某些奇怪的原因，ui-controlgroup的最高保证金为0.5em。在fieldset元素中覆盖它可以解决问题，即

style="margin-top: 0px;"

JQuery Mobile Grid上的垂直对齐

1 个答案: