Html CSS最小化窗口外观的更改

我的菜单有问题。当我更改浏览器窗口大小时，我的菜单将从水平方向更改为垂直方向。是否有任何选项使窗口中的文本保持静态？我希望我的菜单保持不变，即使我改变了窗口大小。这是我的密码：

nav{
位置：绝对位置；
利润上限：288px；
左边距：378px；
高度：25px；
z指数：2；
}
导航>ul>li{
字体大小：20px；
颜色：白色；
填充：10px 40px；
显示：内联块；
z指数：2；
}
导航>ul>li>a{
文字装饰：无；
颜色：rgba（0,0,0,0.35）；
过渡：全线性0.15s；
}
导航>ul>当前项目>a{
背景色：rgba（0,0,0,0.35）；
文本对齐：居中；
颜色：白色；
填充：3px22px；
边界半径：10px；
边界：无；
光标：指针；
宽度：50px；
高度：28px；
z指数：2；
文字装饰：无；
}
导航>ul>li:悬停>a{
背景色：rgba（0,0,0,0.35）；
文本对齐：居中；
颜色：白色；
填充：3px22px；
边界半径：10px；
边界：无；
光标：指针；
宽度：50px；
高度：28px；
z指数：2；
}

您可以添加

空白：nowrap到
nav
属性，如下例所示：

nav {
  position: absolute;
  margin-top: 288px;
  margin-left: 378px;
  height: 25px;
  z-index: 2;
  white-space: nowrap;
}

还有其他几种方法：


将
display:inline block
添加到
nav
属性中
在
nav
属性（例如
width:650px；
或
minwidth:650px；
）中为导航菜单的长度设置一个幻数（定义的数字），这样浏览器就不会影响它。这个选项通常不被认为是一个好的实践，但是根据项目的需要，它可能被忽略
您可以添加
空白：nowrap到
nav
属性，如下例所示：

nav {
  position: absolute;
  margin-top: 288px;
  margin-left: 378px;
  height: 25px;
  z-index: 2;
  white-space: nowrap;
}

还有其他几种方法：


将
display:inline block
添加到
nav
属性中
在
nav
属性（例如
width:650px；
或
minwidth:650px；
）中为导航菜单的长度设置一个幻数（定义的数字），这样浏览器就不会影响它。这个选项通常不被认为是一个好的实践，但是根据项目的需要，它可能被忽略
因此，根据您的代码，这里有一个可能的解决方案


但是，我推荐这样的东西，要优雅得多

因此，根据您的代码，这里有一个可能的解决方案


但是，我推荐这样的东西，要优雅得多

在导航中使用最小宽度，例如最小宽度：12OOpx
 在导航中使用最小宽度，例如最小宽度：12OOpx

nav {
  float:right; // float is cleaner
  width: 650px; // set to your values
  min-width: 650px; // set to your values
  height: 25px;
  z-index: 2;
}

演示：
nav{
浮动：对；
宽度：650px；
最小宽度：650px；
高度：25px；
z指数：2；
}
导航>ul>li{
字体大小：20px；
颜色：白色；
填充：10px 40px；
显示：内联块；
z指数：2；
}
导航>ul>li>a{
文字装饰：无；
颜色：rgba（0,0,0,0.35）；
过渡：全线性0.15s；
}
导航>ul>当前项目>a{
背景色：rgba（0,0,0,0.35）；
文本对齐：居中；
颜色：白色；
填充：3px22px；
边界半径：10px；
边界：无；
光标：指针；
宽度：50px；
高度：28px；
z指数：2；
文字装饰：无；
}
导航>ul>li:悬停>a{
背景色：rgba（0,0,0,0.35）；
文本对齐：居中；
颜色：白色；
填充：3px22px；
边界半径：10px；
边界：无；
光标：指针；
宽度：50px；
高度：28px；
z指数：2；
}







演示：
nav{
浮动：对；
宽度：650px；
最小宽度：650px；
高度：25px；
z指数：2；
}
导航>ul>li{
字体大小：20px；
颜色：白色；
填充：10px 40px；
显示：内联块；
z指数：2；
}
导航>ul>li>a{
文字装饰：无；
颜色：rgba（0,0,0,0.35）；
过渡：全线性0.15s；
}
导航>ul>当前项目>a{
背景色：rgba（0,0,0,0.35）；
文本对齐：居中；
颜色：白色；
填充：3px22px；
边界半径：10px；
边界：无；
光标：指针；
宽度：50px；
高度：28px；
z指数：2；
文字装饰：无；
}
导航>ul>li:悬停>a{
背景色：rgba（0,0,0,0.35）；
文本对齐：居中；
颜色：白色；
填充：3px22px；
边界半径：10px；
边界：无；
光标：指针；
宽度：50px；
高度：28px；
z指数：2；
}






您也可以添加html标记吗？从
nav
标记中删除
margin
，这会限制
ul
的宽度，这会导致
li
被包装。不起作用…相同的问题修复nav的宽度或添加最小宽度。。。。。nav{min width:600px；}您也可以添加html标记吗？从
nav
标记中删除
margin
，这会限制
ul
的宽度，这会导致
li
被包装。不起作用…相同的问题修复nav的宽度或添加最小宽度。。。。。导航{最小宽度：600px；}