CSS最小化窗口更改外观
CSS最小化窗口更改外观
提问于 2017-04-11 22:29:56
我的菜单有问题。当我改变浏览器窗口的大小时，我的菜单从水平方向变为vertical.Is。有没有什么选项可以让文本在窗口中保持静态？我希望我的菜单保持不变，即使我改变了窗口大小。下面是我的代码：
nav {
position: absolute;
margin-top: 288px;
margin-left: 378px;
height: 25px;
z-index: 2;
}
nav>ul>li {
font-size: 20px;
color: white;
padding: 10px 40px;
display: inline-block;
z-index: 2;
}
nav>ul>li>a {
text-decoration: none;
color: rgba(0, 0, 0, 0.35);
transition: all linear 0.15s;
}
nav>ul>.current-item>a {
background-color: rgba(0, 0, 0, 0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
width: 50px;
height: 28px;
z-index: 2;
text-decoration: none;
}
nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, 0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
width: 50px;
height: 28px;
z-index: 2;
}<nav>
<ul>
<li class="current-item"><a href="index.php"> HOME </a></li>
<li><a href="profile.php">PROFILE</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</nav>
回答 4
Stack Overflow用户
发布于 2017-04-11 23:11:40
您可以将white-space: 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;或min-width:650px;)中为导航菜单的长度设置一个幻数(已定义的数)，这样浏览器就不会影响它。此选项通常不被认为是一种良好的做法，但根据您项目的需要，可以忽略此选项。
Stack Overflow用户
发布于 2017-04-11 23:22:42
因此，这里有一个基于您的代码的可能的解决方案。
https://jsfiddle.net/pablodarde/zmh7tyj6/
nav {
position: absolute;
margin-top: 288px;
margin-left: 378px;
height: 25px;
z-index: 2;
}
nav>ul {
display: table;
margin: 0 auto;
padding: 0;
max-width: 650px;
}
nav>ul>li {
display: table-cell;
position: relative;
width: 100%;
max-width: 100px;
font-size: 20px;
color: white;
padding: 10px 40px;
}
nav>ul>li>a {
text-decoration: none;
color: rgba(0, 0, 0, 0.35);
transition: all linear 0.15s;
}
nav>ul>.current-item>a {
background-color: rgba(0, 0, 0, 0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
width: 100%;
max-width: 50px;
height: 28px;
z-index: 2;
text-decoration: none;
}
nav>ul>li:hover>a {
background-color: rgba(0, 0, 0, 0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
width: 100%;
max-width: 50px;
height: 28px;
z-index: 2;
}但是，我推荐这样的东西，更优雅。
Stack Overflow用户
发布于 2017-04-11 23:29:25
在nav中使用min-width，例如min-width:120Opx；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43348869
复制相关文章
相似问题
腾讯云开发者
