Css jquery mobile垂直居中放置两行按钮文本
我有一个带有5个ui btn的导航栏,具有以下CSS规则(对于垂直中心:Css jquery mobile垂直居中放置两行按钮文本,css,jquery-mobile,Css,Jquery Mobile,我有一个带有5个ui btn的导航栏,具有以下CSS规则(对于垂直中心: #company_nav .ui-btn{ height:28px; line-height: 28px; } 问题是其中一个ui btn有两行,另一行从按钮中退出。 我如何管理它 代码如下: <div data-role="navbar" class="grey_bkgd nav-no-border ui-navbar" id="company_nav" role="navigation">
#company_nav .ui-btn{
height:28px;
line-height: 28px;
}
问题是其中一个ui btn有两行,另一行从按钮中退出。
我如何管理它
代码如下:
<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>
也许这不是一个优雅的解决方案,但却是一个解决方案:
#company_nav .ui-btn{
height:28px;
line-height:28px;
}
#company_nav li:last-child .ui-btn{
line-height:14px;
}