부트 스트랩 고정 항법 링크 정렬 변경

Question

이것은 BigCommerce 사이트 용입니다. 링크와 범위가 포함 된 부트 스트랩 고정식 navbar를 추가했습니다. 확실하게 CSS를 설정했는지 확신 할 수 없지만 링크 중 하나를 클릭하기 전까지는 모든 것이 완전히 정상적인 것 같습니다. 글로벌 Big Commerce 로그인/로그 아웃 링크입니다. 처음에는 두 개의 링크로 나타납니다 : "로그인"또는 "계정 만들기"그들은 제대로 정렬되었지만 아무런 문제가 없습니다. 누군가가 버튼 중 하나를 클릭하고 버튼에 서명하면 "로그 아웃"으로 바뀝니다. 사인 아웃으로 변경되면 조금 더 부풀어 오르며 제대로 정렬되지 않습니다. 아래의 스크린 샷을 참조하십시오.

%%GLOBAL_OptimizerLinkScript%% 
<link rel="stylesheet" type="text/css" href="%%GLOBAL_AppPath%%/javascript/jquery/themes/cupertino/ui.all.css?%%GLOBAL_JSCacheToken%%" /> 
    <div id="TopMenu" class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 

       <ul class="nav"> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#GiftsByType">Gifts By Type<span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="GiftsByType"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/wine-gifts/" title="View Wine Gifts">Wine Gifts</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/tea-gifts/" title="View Tea Gifts">Tea Gifts</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/gourmet-gifts/" title="View Gourmet Gifts">Gourmet Gifts</a></li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/spa-baskets/" title="View Spa Baskets">Spa Baskets</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/corporate/" title="View Corporate">Corporate</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/chocolate-lovers/" title="View Chocolate Lovers">Chocolate Lovers</a></li> 
          </ul> 
        </li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#Occasions">Occasions<span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="Occassions"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" data-target="#" href="http://bluebasilgifts.mybigcommerce.com/4th-of-july/" title="View 4th of July Gifts">4th of July</a></li> 
         </ul> 
        </li> 
        <li><a href="/">&nbsp;Home&nbsp;</a></li> 
      </ul>  



      <ul class="nav" style="float: right;">    
       <div class="pull-right"> 
        %%Panel.HeaderSearch%% 
       </div> 
       <span>%%GLOBAL_LoginOrLogoutText%%</span> 
       <li><a href="%%GLOBAL_ShopPath%%/account.php">%%LNG_YourAccount%%</a></li>     



        <li class="CartLink" style="display:%%GLOBAL_HideCartOptions%%"> 
      <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 15px; right: 35px;"></i><span class="badge badge-info" style="position: relative; top: 19px; right: 30px;">0</span></span></a> 
       </li>    
      </ul> 
     </div> 
     </div> 
    </div> 

CSS :

.navbar-fixed-top .navbar-inner, 
.navbar-fixed-bottom .navbar-inner { 
    padding-left: 0; 
    padding-right: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
} 
.navbar-fixed-top .container, 
.navbar-fixed-bottom .container { 
    width: 940px; 
} 
.navbar-fixed-top { 
    top: 0; 
} 
.navbar-fixed-bottom { 
    bottom: 0; 
} 
.navbar .nav { 
    position: relative; 
    left: 0; 
    display: block; 
    float: left; 
    margin: 0 10px 0 0; 
} 
.navbar .nav.pull-right { 
    float: right; 
}  
.navbar .nav > li { 
    float: right; 
    margin-top: 0px; 
} 
.navbar .nav > li > a { 
    float: none; 
    vertical-align: middle; 
    padding: 20px 15px 20px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
    /*text-shadow: 0 1px 0 #ffffff;*/ 
} 
.navbar .nav > li > a:hover { 
    background-color: #e0e0e0; 
    color: #888888; 
    text-decoration: none; 
} 
.navbar .nav > li > a:focus, 
.navbar .nav > li > a:hover { 
background-color: #e0e0e0; 
    color: #888888; 
    text-decoration: none; 
} 
.navbar .nav > span { 
color: #7d7d7d; 
    float: right; 
    margin-top: 19px; 
    display: inline; 

} 
.navbar .nav > span > a { 
    float: none; 
    vertical-align: middle; 
    padding: 20px 7px 20px 7px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
/* text-shadow: 0 1px 0 #ffffff; */ 
} 
.navbar .nav > a { 
    float: right; 
    margin-top: 18px; 

} 
.navbar .nav > a { 
    float: none; 
    vertical-align: middle; 
    padding: 20px 8px 20px 8px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
/* text-shadow: 0 1px 0 #ffffff; */ 
} 
.navbar .nav > span > a:focus, 
.navbar .nav > span > a:hover { 
    background-color: #e0e0e0; 
    color: #888888; 
    text-decoration: none; 
} 

Answer 1

... 나는 자신이 알아 낸 것 같다 합법적보다 "해결 방법"의 가능성이 더 있지만, 고치다.

CSS에서 영향을받는 범위의 일부 맞춤을 변경했습니다. 변경 수직 정렬 중간에서 아래로하고 20 픽셀의 .navbar .nav> 범위에 대한 마진 정상에 추가 :

.navbar .nav > span { 
    color: #ffffff; 
    float: left; 
    margin-top: 20px; 
    display: inline; 
    } 

.navbar .nav > span > a { 
    float: none; 
    vertical-align: bottom; 
    padding: 20px 7px 20px 7px; 
    color: #7d7d7d; 
    font-family: 'Lora', serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    text-decoration: none; 
    /* text-shadow: 0 1px 0 #ffffff; */ 

}