Html <；导航>；调整窗口大小时列表元素消失

更新： CSS文件： HTML文件：

css中的

元素有问题

我用这个css创建了带有四个按钮的导航菜单

nav{
    background: #000000;
    height: 120px;
    width:100%;
}


nav ul {
    margin: 0;
    padding: 10px 0px 0px 0px; 
    text-align: center;
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    letter-spacing: 2px;
    padding: 20px 40px; 
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.80em;
    border: none;
    color: #000;
}

nav a:hover, nav .current a {
    text-decoration: none;
}

nav .current a {
    background: #008C9A;
}

问题是，当我调整窗口大小时，最右边的按钮消失，而不是显示下图所示的水平滚动条

当我调整chrome窗口的大小时

---

为什么我的浏览器不显示水平滚动条并从导航菜单中删除按钮？

您最好为body标签设置最小宽度，例如

body{
    min-width: 720px; /* or what ever you want */
    ...
}

正文{
最小宽度：720px；
边际：0px；
填充：0px；
背景：#fff；
颜色：#363636；
字体系列：Arial、Helvetica、无衬线字体；
字号：12号；
字体大小：300；
}
h1{
保证金：0；
填充：0；
}
p{
线高：190%；
}
a{
颜色：#171717；
}
a:悬停{
文字装饰：无；
}
/*********************************************************************************/
/*列出样式*/
/*********************************************************************************/
ul.1
{
保证金：0；
填充：0；
列表样式：无；
}
ul.1 li
{
边框顶部：实心1px#e5；
填充：0.80em0；
}
ul.style1li：第一个孩子
{
边界顶部：0；
填充顶部：0；
}
ul.2
{
保证金：0；
填充：0；
列表样式：无；
}
ul.2李
{
边框顶部：实心1px#e5；
填充：0.80em0；
}
ul.2李：第一个孩子
{
边界顶部：0；
填充顶部：0；
}
/*********************************************************************************/
/*标题标题*/
/*********************************************************************************/
#容器{
宽度：100%；
/*将左/右宽度设置为“自动”将使内容居中*/
保证金：0px自动；
背景：#FFFFFF；
填充：10px 0px；
}
#容器h2{
文本转换：大写；
字母间距：0.20em；
字号：700；
字号：2em；
颜色：#00AABB；
}
/* --------------------- 
用于收割台区域
--------------------- */
标题
{
背景#848484；
文本对齐：居中；
}
收割台h1{
字母间距：0.0em；
文本转换：大写；
字号：3em；
填充：1.1微米0；
}
标题a{
文字装饰：无；
颜色：#81BEF7；
}
标题a：已访问{
文字装饰：无；
颜色：#81BEF7；
}
导航{
背景：#00AABB；
高度：90px；
宽度：100%；
}
导航ul{
保证金：0；
填充：35px 0px 0px 0px；/*右上-左下*/
文本对齐：居中；
}
李海军{
显示：内联块；
}
导航a{
显示：内联块；
字母间距：2px；
填充：20px 40px；/*上/下和右/左*/
文字装饰：无；
文本对齐：居中；
文本转换：大写；
字号：0.80em；
边界：无；
颜色：#FFF；
}
导航a：悬停，导航当前a{
文字装饰：无；
}
当前导航a{
背景：#008C9A；
}
/**页面*/
/*********************************************************************************/
/*页脚*/
/*********************************************************************************/
页脚{
填充：1em 0em；
文本对齐：居中；
背景#4242；
/*位置：绝对位置*/
宽度：100%；
底部：0px；
}
页脚p{
字母间距：0.20em；
文本对齐：居中；
文本转换：大写；
字号：0.80em；
颜色：#6F6F6F；
}

小部件标准






整数位错
这是一个免费的、完全符合标准的CSS模板。此模板中的照片来自。这个免费的模板是根据许可证发布的，所以你可以自由地用它做任何你想做的事情（甚至在商业上使用它），只要你给我们信用。玩得开心：）

献祭者，献祭精英。Nam pede erat，porta eu，lobortis eget，tempus et，tellus。艾蒂安·内克。尼斯勒大学的学识生活。非wisi a sem semper eleifend的空值。Donec mattis libero eget urna。杜伊斯·普雷蒂姆·维利特·ac·莫里斯。在欧盟中，不存在相互支持。埃尼安·莱克托斯·洛雷姆、帝国饮食、乌尔特里斯·埃吉特、奥纳雷·埃特、威斯康星州。佩伦茨克阿迪皮斯切普鲁斯ac麦格纳。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。非wisi a sem semper eleifend的空值。Donec mattis libero eget urna

&抄袭；无标题。版权所有

您将导航条的宽度设置为100%。以要设置的像素为单位设置其宽度。用此代码替换导航代码，然后再次检查

nav{
    background: #000000;
    height: 120px;
    width: 800px; // here set width whichever you want
}

---

单杠我不知道，但我不认为他“删除”了你的导航项目，它们只是“在屏幕外”。如果您想让您的网站快速、方便地响应，请使用引导或骨架之类的框架（如果您想要最小的框架）。如果您超过URL，则可能会出现

溢出：隐藏
，或者
，通过inspect Element可以很容易地找到确切的问题实际上在我的整个系统中没有使用
溢出
ccss@Ajith，我在问题中添加了URL，请查看更新的问题。这有什么帮助？为什么要使用特定的宽度而不是基于百分比的响应宽度？正如问题所述，用户希望显示水平滚动条。。设置为以像素为单位而不是以百分比为单位将给出所需的解决方案。但我不认为应用到导航栏是解决方案，因为您可以看到页面实际上对某个范围有响应（文本换行到下一行）。更好的解决办法是改变菜单的布局，保持100%的宽度，但要使项目阻塞，或者给导航添加溢出。好吧，我同意你的看法。毫无疑问。但我只是给了你