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;    
}

使控件组内的表格显示为内置左浮动，并使表格内的按钮上的右角成为圆角

  

<强> DEMO