2014-10-11 161 views
0

您可以查看我在这里工作的页的演示环绕。但是,在Chrome或Internet Explorer中查看时,导航栏正在环绕。导航栏在某些浏览器

可以做些什么来解决这个问题,所以它可以在所有浏览器中以相同的方式工作?有没有一种方法可以限制它,以便它不会环绕并将所有内容保留在同一行上?

下面是导航栏的代码的副本:

<div class="navbar whmcscontainer" style="margin-top:14px;"> 
    <div class="nav-collapse collapse"> 
     <div class="menu" style="text-align: center;"> 
<ul style="padding: 0; white-space:nowrap;" id="treemenu1"> 
    <ul class="nav"> 
     <li style="white-space:nowrap;"><a href="http://privateservercloud.com/panel">SEO Dashboard</a> 
     </li> 
    </ul> 
    <ul class="nav"> 
     <li style="white-space:nowrap;"><a href="#">Manage Campaigns</a> 
     <ul style="margin-left: 1px; width: 179px;"> 
      <li style="width:175px;margin-top:-7px;border-top:0;"><a href="http://privateservercloud.com/panel/urls"><span class="hoverer" style="width:180px; margin-left:5px;">Keywords & Websites</span></a></li> 
      <li style="width:175px;border-top:0;"><a href="http://privateservercloud.com/panel/groups"><span class="hoverer" style="width:180px; margin-left:5px;">Add/Remove Groups</span></a></li> 
      <li style="width:175px;border-top:0;"><a href="http://privateservercloud.com/panel/settings/predefined-filters"><span class="hoverer" style="width:180px; margin-left:5px;">Setup Custom Filters</span></a></li> 
      <li style="width:175px;border-bottom:0;border-top:0;"><a href="http://privateservercloud.com/panel/tags"><span class="hoverer" style="width:180px; margin-left:5px;">Create Special Tags</span></a></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="nav"> 
     <li style="white-space:nowrap;"><a href="#">Reporting System</a> 
     <ul style="margin-left:0;width:169px;"> 
      <li style="width:164px;margin-top:-7px;border-top:0;"><a href="http://privateservercloud.com/panel/reports/overview"><span class="hoverer" style="width:169px; margin-left:5px;">The Overview Report</span></a></li> 
      <li style="width:164px;border-top:0;"><a href="http://privateservercloud.com/panel/reports/daily"><span class="hoverer" style="width:169px; margin-left:5px;">My Daily Breakdown</span></a></li> 
      <li style="width:164px;border-top:0;"><a href="http://privateservercloud.com/panel/reports/automated"><span class="hoverer" style="width:169px; margin-left:5px;">Automated Reports</span></a></li> 
      <li style="width:164px;border-top:0;"><a href="http://privateservercloud.com/panel/reports/notification"><span class="hoverer" style="width:169px; margin-left:5px;">Custom Notifications</span></a></li> 
      <li style="width:164px;border-bottom:0;border-top:0;"><a href="http://privateservercloud.com/panel/reports/share"><span class="hoverer" style="width:169px; margin-left:5px;">Shared Report Links</span></a></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="nav"> 
     <li style="white-space:nowrap;"><a href="#">General Settings</a> 
     <ul style="margin-left:1px;width:158px;"> 
      <li style="width:154px;margin-top:-7px;border-top:0;"><a href="http://privateservercloud.com/panel/settings"><span class="hoverer" style="width:159px; margin-left:5px;padding:8px 0 6px 4px;">Rank Tracker Settings</span></a></li> 
      <li style="width:154px;border-top:0;"><a href="http://privateservercloud.com/panel/reports/custom"><span class="hoverer" style="width:159px; margin-left:5px;">Customize Templates</span></a></li> 
      <li style="width:154px;border-top:0;"><a href="http://privateservercloud.com/panel/settings/predefined-filters/"><span class="hoverer" style="width:159px; margin-left:5px;">My Predefined Filters</span></a></li> 
      <li style="width:154px;border-bottom:0;border-top:0;"><a href="http://privateservercloud.com/panel/settings/cloud-storage/"><span class="hoverer" style="width:159px; margin-left:5px;">Setup Cloud Storage</span></a></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="nav"> 
     <li style="white-space:nowrap;"><a href="#">Support Center</a> 
     <ul style="margin-left:0;width:152px;"> 
      <li style="width:147px;margin-top:-7px;border-top:0;"><a href="http://privateservercloud.com/members/contact.php"><span class="hoverer" style="width:152px; margin-left:5px;">Create New Ticket</span></a></li> 
      <li style="width:147px;border-top:0;"><a href="http://privateservercloud.com/members/supporttickets.php"><span class="hoverer" style="width:152px; margin-left:5px;">My Existing Tickets</span></a></li> 
      <li style="width:147px;border-bottom:0;border-top:0;"><a href="http://privateservercloud.com/members/knowledgebase"><span class="hoverer" style="width:152px; margin-left:5px;">Knowledge Base</span></a></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="nav"> 
     <li style="white-space:nowrap;"><a href="#" style="border-right:0;">Account Details</a> 
     <ul style="margin-left:0;width:157px;"> 
      <li style="width:147px;margin-top:-7px;border-top:0;"><a href="http://privateservercloud.com/members/clientarea.php"><span class="hoverer" style="width:156px; margin-left:5px;">Billing Overview</span></a></li> 
      <li style="width:147px;border-top:0;"><a href="http://privateservercloud.com/members/upgrade.php?type=package&amp;id=2"><span class="hoverer" style="width:156px; margin-left:5px;">Upgrade/Downgrade</span></a></li> 
      <li style="width:147px;border-top:0;"><a href="http://privateservercloud.com/members/affiliates.php"><span class="hoverer" style="width:156px; margin-left:5px;">Affiliate Dashboard</span></a></li> 
      <li style="width:147px;border-top:0;"><a href="http://privateservercloud.com/members/clientarea.php?action=details"><span class="hoverer" style="width:156px; margin-left:5px;">Edit Account Details</span></a></li> 
      <li style="width:147px;border-top:0;"><a href="http://privateservercloud.com/members/clientarea.php?action=invoices"><span class="hoverer" style="width:156px; margin-left:5px;">Search My Invoices</span></a></li> 
      <li style="width:147px;border-top:0;"><a href="http://privateservercloud.com/members/clientarea.php?action=changepw"><span class="hoverer" style="width:156px; margin-left:5px;">Change Password</span></a></li> 
      <li style="width:147px;border-bottom:0;border-top:0;"><a href="http://privateservercloud.com/members/logout.php"><span class="hoverer" style="width:156px; margin-left:5px;">Account Logout</span></a></li> 
     </ul> 
     </li> 
    </ul> 
     <div class="clear"></div> 
</ul> 
    </div> 
    </div> 
</div> 

任何帮助,任何人都可以提供将不胜感激。感谢您的时间。

回答

0

它也包括我在Firefox中。

将水平填充从25px更改为23px可以在所有三个浏览器中修复它。

.navbar .nav > li > a { 
    ... 
    padding: 15px 23px; 
    ... 
} 
+0

我打算这样做,但有什么办法可以解决右边有额外空间的问题吗?当我将其更改为23px时,“帐户详细信息”右侧有额外的空间... – Username 2014-10-11 16:45:26

+0

使用'23.3px'似乎可以清除所有三种浏览器。 – 2014-10-11 16:53:16

+0

感谢您的帮助! – Username 2014-10-11 17:46:01