2014-10-11 133 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