JQuery Mobile：如何仅将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>

我不明白为什么代码输入旁边的检查图标没有对齐，或者为什么复选框和“不再显示此内容”文本没有对齐。

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

Answer 1

使用你所拥有的，元素未对齐的原因是因为为弹出窗口中的所有元素设置了 display: block css属性，这会导致它们占用整个空间因此阻止就像一个段落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
}

<强>结果