html - jQuery Mobile 水平按钮组显示不正确

Question

我遇到按钮在水平控制组中无法正确显示的问题。这是它应该如何工作的:

登录后，注销按钮使用带有提交按钮的表单，但未正确显示。这是我得到的:

我不明白为什么，因为标记似乎是正确的，但 Chrome 没有正确解释它。以下是 Chrome 为 CSS 计算的内容:

为什么 Chrome 显示它应该使用 inline-block 但仍在使用 block？

这是标记源:

<div style="float:right;margin-right: 25px;">
    <div data-role="controlgroup" data-type="horizontal" style="float:right;display:inline;">
        <a class="username" data-ajax="false" data-inline="true" data-role="button" href="/Account/Manage" id="manageLink" title="Manage">admin</a>
        <form action="/Account/Logout" data-ajax="false" id="logoutForm" method="post">
            <input name="__RequestVerificationToken" type="hidden" value="" />
            <a href="javascript:document.getElementById('logoutForm').submit()" id="logoutLink" data-role="button" data-inline="true">Logout</a>
        </form>    
    </div>
</div>

这是在 Chrome 的元素检查器中应用的标记:

<div style="float:right;margin-right: 25px;">
    <div data-role="controlgroup" data-type="horizontal" style="float:right;display:inline;" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" aria-disabled="false" data-disabled="false" data-shadow="false" data-corners="true" data-exclude-invisible="true" data-mini="false" data-init-selector=":jqmData(role='controlgroup')">
        <div class="ui-controlgroup-controls">
            <a class="username ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-inline ui-first-child" data-ajax="false" data-inline="true" data-role="button" href="/Account/Manage" id="manageLink" title="Manage" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a">
                <span class="ui-btn-inner"><span class="ui-btn-text">admin</span></span></a>
            <form action="/Account/Logout" data-ajax="false" id="logoutForm" method="post">
                <input name="__RequestVerificationToken" type="hidden" value="">
                <a href="javascript:document.getElementById('logoutForm').submit()" id="logoutLink" data-role="button" data-inline="true" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-last-child ui-btn-up-a">
                    <span class="ui-btn-inner"><span class="ui-btn-text">Logout</span></span></a>
            </form>    
        </div>
    </div>
</div>

生成的标记似乎具有所有适当的 jQuery Mobile 类以使其看起来正确:btn-inline 和 ui-last-child。不确定是什么导致了问题。想法？

Answer 1

这是因为您在控制组中有一个 FORM 元素。最好的解决方案是删除 FORM 元素，只处理没有它的注销按钮点击。

如果你真的想保留 FORM，你可以覆盖一些 CSS 以使其看起来正确:

[data-role="controlgroup"] form {
    display: inline;
    float: left;
}
[data-role="controlgroup"] form .ui-last-child {
    border-top-right-radius: 0.5em !important;
    border-bottom-right-radius: 0.5em !important;    
}

使控制组内的表单与左浮动内联显示，并使表单内按钮的右 Angular 变圆

DEMO