屏幕尺寸减小时导航栏出现问题答案

【问题标题】：Having issue with navigation bar when the screen size is decreasing屏幕尺寸减小时导航栏出现问题
【发布时间】：2016-05-12 22:31:16
【问题描述】：

我有一个响应式导航栏。当屏幕尺寸稍微减小时，最后一个 li 会转到其他 li 的下一行。我应该怎么做才能修复它，使其不会移动到其他菜单元素下的下一行？

HTML 代码：

<nav class="cd-main-nav-wrapper mainNav">
  <ul class="cd-main-nav">
    <li style="margin-right:none;" class="logoNavPos">
      <a href="index.html">
        <img src="pic/logo1.jpg" alt="" class="desktopLogo">
      </a>
    </li>
    <li class="current_page_item">
      <a href="index.html">خانه</a>             </li>
        <li><a href="pages/product.html">مزایای بیمه عمر</a></li>
        <li><a href="pages/ourBranches.html">بیمه عمر و سرمایه گذاری</a></li>
        <li><a href="pages/Catalogue.html">پرسش های متداول</a></li>
        <li><a href="pages/aboutUs.html">درباره ما</a></li>
        <li style="display:none;" class="mobileSwLang">
          <a href="#">English version</a></li>  
    </ul>
  </nav>

https://jsfiddle.net/MelodyHajian/4ntL3m9o/ 请给我建议。

【问题讨论】：

我们至少需要一些 CSS 来提供帮助。仅使用所需的代码创建一个 jsfiddle 以使其工作。
如果lis 是inline-block，那么white-space:nowrap; 将在ul 上执行否则：ul {display:table} li {display:table-cell; float:none } 没有足够的信息你来做一个回答这个
@ChrisG 我编辑了问题，检查 jsfiddle。
@GCyrillus 检查 jsfiddle 链接。

标签： html css menu nav

【解决方案1】：

jquery 可能会有所帮助这是我玩过的一个jsfiddle......

$(window).resize(function() {
var windowsize = $(window).width();
if (windowsize > 767) {
$('.nav').show();
} else {
$('.nav').hide();
$('.toggle').removeClass('open');
}
})
$('.toggle').click(function(event) {
$(this).toggleClass('open');
if ($(this).hasClass('open')) {
  $('.nav').show();
} else {
$('.nav').hide();
}
})

http://jsfiddle.net/GlynneT/2pv9pkb0/

【讨论】：

我编辑了问题并添加了 jsfiddle 链接。检查一下。