Javascript 如何防止重新调整尺寸时导航栏中的元素被切断？

我设法解决了一个问题，我的导航元素在调整窗口大小时聚集在一起，方法是添加：

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

但现在，当我调整窗口大小时，导航栏中的元素正在消失

@导入url(https://fonts.googleapis.com/css?family=Pacifico);
@导入url(https://fonts.googleapis.com/css?family=Patua+一),；
身体{
边际：0px；
}
标题{
宽度：100%；
背景：rgba（0,0,0,0.7）；
颜色：白色；
填充：5px15px 0px 15px；
位置：固定；
排名：0；
左：0；
z指数：999；
}
收割台h1{
字体大小：30px；
显示：内联；
填充：30px；
字体系列：“Pacifico”，草书；
}
导航ul{
保证金：0；
显示：内联；
填充：50px；
空白：nowrap；
}
#主要{
字号：80px；
}
李国荣{
颜色：白色；
列表样式类型：无；
显示：内联块；
填充：20px 65px；
边际：0px；
字体系列：“八卦一号”，草书；
显示：表格单元格；
}
nav ul li:悬停{
颜色：#999；
}
#幽灵按钮{
背景：rgba（0,0,0,0.3）；
边框：0.5px纯白；
宽度：200px；
填充：10px；
显示：内联块；
字体系列：“新罗马时代”；
}
#幽灵按钮：悬停{
背景：rgba（255，255，255，0.3）；
}
#英雄{
背景尺寸：封面；
位置：相对位置；
高度：100vh；
背景图片：url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg);
}
.标题{
位置：绝对位置；
最高：50%；
文本对齐：居中；
宽度：100%；
颜色：#fff；
字体大小：36px；
-ms变换：翻译（0，-50%）；
/*IE 9*/
-webkit转换：翻译（0，-50%）；
/*狩猎*/
转换：翻译（0，-50%）；
字体系列：“Pacifico”，草书；
字体系列：“新罗马时代”；
}
.校长1{
垫底：300px；
颜色：黑色；
文本对齐：居中；
字体大小：25px；
字体系列：“Pacifico”，草书；
字体系列：“新罗马时代”；
}
p{
字体大小：20px；
}
/*#sourceMappingURL=stylesheet.css.map*/

埃利亚诺斯酒店

家
菜单
第1页
第2页

用爱制造
但是，我们要做的是最小限度的努力

乌拉姆科珀酒店

我是一个普通的消费者。酒后驾车



了解更多

我认为你可以很容易地使用

我用一个例子编辑了你的代码。使用

flex-grow:1

在

li

上，它们将在彼此之间划分可用的水平空间。为了避免该行被包装，可以考虑添加<代码> Flex Frase:NoRAP；<编码>至

ul

使用Fracebox之前，请考虑./P>

@导入url(https://fonts.googleapis.com/css?family=Pacifico);
@导入url(https://fonts.googleapis.com/css?family=Patua+一),；
身体{
边际：0px；
}
标题{
宽度：100%；
背景：rgba（0,0,0,0.7）；
颜色：白色；
填充：5px15px 0px 15px；
位置：固定；
排名：0；
左：0；
z指数：999；
}
收割台h1{
字体大小：30px；
浮动：左；
填充：30px；
字体系列：“Pacifico”，草书；
}
导航ul{
保证金：0；
显示：内联；
填充：50px；
显示器：flex；
}
#主要{
字号：80px；
}
李国荣{
颜色：白色；
列表样式类型：无；
显示：内联块；
//填充：20px 65px；
边际：0px；
字体系列：“八卦一号”，草书；
柔性生长：1；
}
nav ul li:悬停{
颜色：#999；
}
#幽灵按钮{
背景：rgba（0,0,0,0.3）；
边框：0.5px纯白；
宽度：200px；
填充：10px；
显示：内联块；
字体系列：“新罗马时代”；
}
#幽灵按钮：悬停{
背景：rgba（255，255，255，0.3）；
}
#英雄{
背景尺寸：封面；
位置：相对位置；
高度：100vh；
背景图片：url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/1235217_483642721808631_6410301847003523270_n_zpse3g2acn1.jpg);
}
.标题{
位置：绝对位置；
最高：50%；
文本对齐：居中；
宽度：100%；
颜色：#fff；
字体大小：36px；
-ms变换：翻译（0，-50%）；
/*IE 9*/
-webkit转换：翻译（0，-50%）；
/*狩猎*/
转换：翻译（0，-50%）；
字体系列：“Pacifico”，草书；
字体系列：“新罗马时代”；
}
.校长1{
垫底：300px；
颜色：黑色；
文本对齐：居中；
字体大小：25px；
字体系列：“Pacifico”，草书；
字体系列：“新罗马时代”；
}
p{
字体大小：20px；
}
/*#sourceMappingURL=stylesheet.css.map*/

埃利亚诺斯酒店

家
菜单
第1页
第2页

用爱制造
但是，我们要做的是最小限度的努力

乌拉姆科珀酒店

我是一个普通的消费者。酒后驾车



了解更多

我认为你可以很容易地使用

我用一个例子编辑了你的代码。使用

flex-grow:1

在

li

上，它们将在彼此之间划分可用的水平空间。为了避免该行被包装，可以考虑添加<代码> Flex Frase:NoRAP；<编码>至

ul

使用Fracebox之前，请考虑./P>

@导入url(https://fonts.googleapis.com/css?family=Pacifico);
@导入url(https://fonts.googleapis.com/css?family=Patua+一),；
身体{
边际：0px；
}
标题{
宽度：100%；
背景：rgba（0,0,0,0.7）；
颜色：白色；
填充：5px15px 0px 15px；
位置：固定；
排名：0；
左：0；
z指数：999；
}
收割台h1{
字体大小：30px；
浮动：左；
填充：30px；
字体系列：“Pacifico”，草书；
}
导航ul{
保证金：0；
显示：内联；
填充：50px；
显示器：flex；
}
#主要{
字体-