CSS Make Div Text Stay On 1 Line - css

Question

So I'm trying to make a custom login bar for my Xenforo website theme, I've created a custom navigationbar and am trying to add in the Login etc but when I do it I get this: http://i.imgur.com/oyau6b5.png
Can anyone help me make it so it's all on 1 line instead of 3 seperate lines? My website is www.royaltymc.net
Here is the actual bar code:
<div class="navTabs4">
<xen:if is="#uix_pageStyle==1">
<div class="pageWidth">
</xen:if>
<ul class="publicTabs navLeft">
<xen:if is="( #uix_navigationStickyLogo && #uix_stickyNavigation ) || #uix_navStyle == 2">
<li id="logo_small">
<a href="{$logoLink}">
<xen:if is="#uix_smallLogoPath">
<img src="#uix_smallLogoPath">
<xen:elseif is="#uix_logoText"/>
<h2 class="uix_textLogo"><xen:if is="#uix_logoTextIcon"><i class="uix_icon #uix_logoTextIcon"></i></xen:if><xen:if is="#uix_logoText">#uix_logoText</xen:if></h2>
<xen:else/>
<img src="#headerLogoPath" alt="{$xenOptions.boardTitle}" />
</xen:if>
</a>
</li>
</xen:if>
<!-- Shop -->
<xen:if is="#uix_loginTriggerPosition == 1">
<xen:include template="uix_loginTab" />
</xen:if>
<!-- extra tabs: middle -->
<xen:if is="{$extraTabs.middle}">
<xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
<xen:if is="{$extraTab.linksTemplate}">
<li class="navTab {$extraTabId} <xen:if is="#uix_removeTabLinks">{xen:if $extraTab.selected, 'selected'} Popup PopupControl PopupClosed<xen:else />{xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}</xen:if>">
NoPopupGadget</xen:if>"<xen:if is="!#uix_navDropdownArrows"> rel="Menu"</xen:if>>{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if>
<div class="<xen:if is="#uix_removeTabLinks">Menu JsOnly tabMenu<xen:else />{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}</xen:if> {$extraTabId}TabLinks">
{xen:if '{$extraTab.selected} && #uix_pageStyle == 1 && !#uix_removeTabLinks', '<div class="pageWidth">'}
<div class="primaryContent menuHeader">
<h3>{$extraTab.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
{xen:raw $extraTab.linksTemplate}
<xen:if is="{$extraTab.selected}"><xen:include template="uix_tabLinksSearch" /></xen:if>
{xen:if '{$extraTab.selected} && #uix_pageStyle == 1 && !#uix_removeTabLinks', '</div>'}
</div>
</li>
<xen:else />
<li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
NoPopupGadget</xen:if>"<xen:if is="!#uix_navDropdownArrows"> rel="Menu"</xen:if>>{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if>
<xen:if is="!#uix_removeTabLinks"><xen:if is="{$extraTab.selected}"><div class="tabLinks"><xen:include template="uix_tabLinksSearch" /></div></xen:if></xen:if>
</li>
</xen:if>
</xen:foreach>
</xen:if>
</ul>
<xen:if is="{$uix_searchPosition} == 2">
<xen:include template="uix_searchMinimal" />
</xen:if>
<xen:if is="#uix_pageStyle==1"></div></xen:if>
</div>
Here is my HTML Login Bar Code: (Lot's of uncessary code, not sure which bits to take out)
<xen:if is="!{$visitor.user_id} && {$contentTemplate} != 'login' && {$contentTemplate} != 'login_with_error'">
<li class="navTab login{xen:if '#uix_loginTriggerStyle == 2', ' Popup PopupControl'} PopupClosed">
<xen:if is="#uix_loginTriggerStyle == 1"><label for="LoginControl"></xen:if>
<a href="{xen:link login}" class="navLink uix_dropdownDesktopMenu{xen:if '#uix_loginTriggerStyle == 2', ' NoPopupGadget'}{xen:if '#uix_loginTriggerStyle == 3', ' OverlayTrigger'}"{xen:if '#uix_loginTriggerStyle == 2', 'rel="Menu"'}>
<xen:if is="#uix_loginTriggerIcons"><i class="uix_icon uix_icon-signIn"></i> </xen:if>
<strong><b><font color="white">Login</font></b></strong>
</a>
<xen:if is="#uix_loginTriggerStyle == 1"></label></xen:if>
<xen:if is="#uix_loginTriggerStyle == 2">
<div class="Menu JsOnly tabMenu uix_fixIOSClick">
<div class="secondaryContent uix_loginForm">
<xen:include template="uix_loginForm" />
</div>
</div>
</xen:if>
</li>
<a> or </a>
<xen:if is="#uix_loginShowRegister && {$contentTemplate} != 'register_form'">
<li class="navTab register PopupClosed">
<a href="{xen:link register}" class="navLink">
<xen:if is="#uix_loginTriggerIcons"><i class="uix_icon uix_icon-register"></i> </xen:if>
<strong><font color="white"> Create a new account</font></strong>
</a>
</li>
</xen:if>
</xen:if>
Here is my code CSS for it:
NOTE: If you need any other code, don't hesitate to ask!
.navTabs4
{
#property "navTabs";
font-size: 14px;
color: #fff;
background-color: #00254F;
line-height: 37px;
text-align: center;
border-color: #uix_primaryBorder.border-color;
border-radius: #uix_globalLargeBorderRadius;
background-clip: content-box;
#property "/navTabs";
height: 40px;
}

Answer 1

Add this CSS code to your stylesheets:
.navTab { display: inline-block; }
If it doesn't work, try adding !important after the inline-block statement.