JQuery 移动设备：如何仅将 UI 元素与标记对齐？

Question

使用 JQueryMobile，我正在尝试构建一个应该如下所示的弹出窗口

我已经尝试了所有可能的选项，但无法达到这个 UI。

    <div data-role="popup" id="referpage" data-overlay-theme="b" data-theme="b" data-dismissible="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <div data-role="main" class="ui-content" data-theme="b">
            <h2 class="ui-title">Have a code?</h2>
            <p>validate the code with us right here</p>
            <div class="grid_14">
                <div class="grid_10">
                    <input type="text" data-clear-btn="true" placeholder="6 char. code" name="referralCode" id="referralCode">
                </div>
                <div class="grid_4">
                    <a class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-check ui-btn-icon-notext">check</a>
                </div>
            </div>

            <div class="grid_14">
                <div class="grid_4">
                    <input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true">
                </div>
                <div class="grid_10">
                    <p>do not show me this again</p>
                </div>
            </div>

            <a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-arrow-r">Next</a>
            <!-- <a id="btnReferralPageNext" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Next</a> -->
        </div>
    </div>

我不明白为什么代码输入旁边的复选图标没有对齐，或者为什么复选框和 "do not show me this again" 文本没有对齐。

这里的任何想法都会有所帮助。

Answer 1

根据您所拥有的，元素未对齐的原因是因为为所有元素设置了 display: block css 属性在你的弹出窗口中，这会导致它们占据整个 space 因此 block 就像段落 p 元素一样。

将其更改为 inline-block 即可解决问题。

有关 css 显示属性

的更多信息

http://www.w3schools.com/cssref/pr_class_display.asp

演示。我删除了一些标记 div，因为不需要。

http://jsfiddle.net/8x4vkv1b/

CSS

.grid_11, .grid_12, .grid_4, .grid_10 {
    display: inline-block !important;
}
.grid_11 {
    width:150px;
}
.next {
    left:66%;
    margin-bottom:-5px
}

结果

JQuery 移动设备：如何仅将 UI 元素与标记对齐？

JQuery Mobile: How do I align UI elements with mark up only?

html

jquery

jquery-mobile