CSS最小化窗口更改外观

Question

我的菜单有问题。当我更改浏览器窗口大小时，我的菜单从水平变为垂直。是否有任何选项可以在窗口中使文本变为静态？即使我改变窗口大小，我也希望我的菜单保持相同的状态。这里是我的代码：

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>

Answer 1

你可以添加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;作为示例）中为导航菜单的长度设置幻数（定义的数字），以便浏览器不会影响它。该选项通常不被认为是一种好的做法，但根据项目的需要，这可能被忽略。

Answer 2

所以，这里有一个基于你的代码的可能的解决方案。

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; 
} 

不过，我建议这样的事情，更优雅。

https://jsfiddle.net/pablodarde/tenueqe6/

Answer 3

使用最小宽度在NAV例如最小宽度：12OOpx;

Answer 4

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 { 
 
    float:right; 
 
    width: 650px; 
 
    min-width: 650px; 
 
    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>

有几个方法可以做到这一点;最终你需要定义你的width:的。此外，position: absolute;通常不需要这样的东西;你也可以使用margin:漂浮物。