Question

我有一个带有5 ui-btn的导航栏，其中包含以下CSS规则（对于垂直中心：

#company_nav .ui-btn{
    height:28px;
    line-height: 28px;
}

问题是其中一个ui-btn有2行，而另一行从按钮中退出。我该如何管理？

这是代码：

<div data-role="navbar" class="grey_bkgd nav-no-border ui-navbar" id="company_nav" role="navigation">
            <ul class="ui-grid-d ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                <li class="ui-block-a ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="one" aria-labelledby="ui-id-1" aria-selected="true"><a href="#one" data-ajax="false" class="ui-link ui-btn ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Overview</a></li>
                <li class="ui-block-b ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="two" aria-labelledby="ui-id-2" aria-selected="false"><a href="#two" data-ajax="false" class="ui-link ui-btn ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Products</a></li>
                <li class="ui-block-c ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="recent" aria-labelledby="ui-id-3" aria-selected="false"><a href="#recent" data-ajax="false" class="ui-link ui-btn ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Employees</a></li>
                <li class="ui-block-d ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="recent" aria-labelledby="ui-id-4" aria-selected="false"><a href="#recent" data-ajax="false" class="ui-link ui-btn ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Followers</a></li>
                <li class="ui-block-e ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="activity" aria-labelledby="ui-id-5" aria-selected="false"><a href="#activity" data-ajax="false" class="ui-link ui-btn ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Recent<br>activities</a></li>
            </ul>
        </div>

Answer 1

也许这不是一个优雅的解决方案，但它是一种解决方法：

#company_nav .ui-btn{
    height:28px;    
    line-height:28px;
}

#company_nav li:last-child .ui-btn{
    line-height:14px;
}

FIDDLE

jquery mobile-vertical中心两行按钮文本

1 个答案: