导航栏在某些浏览器中环绕

Question

您可以在此处查看我正在处理的页面的演示：http://www.privateservercloud.com

当我在FireFox中打开此页面时，它会正确显示顶部导航栏。但是，在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>

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

Answer 1

它也适用于Firefox。

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

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