如何使导航栏菜单只停留在一行

Question

我正在尝试创建一个带有3个div的简单粘性导航栏：-最左边的一个(包含图像徽标+文本徽标(-其中一个中心(包含实际菜单(-最右边的一个(包含社交图标(

到目前为止，我很好地解决了弹性和其他问题，但在菜单的一个项目上，我有一个部分"；为什么我们"；，它在两行而不是一行。我该怎么解决这个问题？现在是这样的：

在此处输入图像描述

这是我目前掌握的代码：

body {
background-color: #A8DADC;
}
#navbar {
background-color: #457B9D;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 10px;
}
#logo-stuff {
display: inline-flex;
order: 1;
align-self: center;
background-color: green;
}
#logo-text {
display: flex;
align-self: center;
}
#logo-img {
width: 30%;
}
#links {
order: 2;
display: inline-flex;
justify-content: space-evenly;
align-self: center;
padding: 0px 100px;
background-color: red;
}
#socials {
order: 3;
background-color: yellow;
position: relative;
padding: 0px 70px;
align-self: center;
}
.nav-link {
color: white;
font-size: large;
padding: 10px 10px;
align-self: center;
}

<header id="header">
<nav id="navbar">
<div id="logo-stuff">
<img src="https://i.ibb.co/GMSp6tR/Pngtree-blue-assassin-esports-logo-for-4295380.png" alt="" id="logo-img">
<h1 id="logo-text">Gaming Den</h1>
</div>
<div id="links">
<a href="#home" class="nav-link">Home</a>
<a href="#whyus" class="nav-link" id="whyus">Why us</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<div id="socials">Socials</div>
</nav>
</header>

提前谢谢！

Answer 1

white-space: nowrap是一个非常常见的修复方法，但如果使用不正确或不需要，它可能会出现问题。在您的情况下，nav-links换行只是因为没有定义宽度，所以浏览器在调整大小时不知道何时停止收缩。我在#links和min-width: fit-content;中添加了width: 100%;，这允许您的文本在调整大小时不换行。

现在，这解决了导航栏不在一行的问题。。。你还能做什么？

既然您知道min-width是如何工作的，我们可以在其他一些地方设置它。如果你要使用%来定义你的图像的宽度，我会指定一个最小宽度，这样它就不会得到"；太短了"；当在媒体设备上时。我指定了一个。

现在是white-space: nowrap;的一个完美例子——如果将min-width设置在#徽标文本上，则文本不会换行，这很好，但在调整大小时，您会注意到绿色容器并不总是适合文本。很容易修复，这就是white-space: nowrap;的用武之地。

body {
background-color: #A8DADC;
}
#navbar {
background-color: #457B9D;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 10px;
}
#logo-stuff {
display: inline-flex;
order: 1;
align-self: center;
background-color: green;
white-space: nowrap;
}
#logo-text {
display: flex;
align-self: center;
min-width: fit-content;
}
#logo-img {
width: 30%;
min-width: 60px;
}
#links {
order: 2;
display: inline-flex;
justify-content: space-evenly;
align-self: center;
padding: 0px 20px;
background-color: red;
width: 100%;
min-width: fit-content;
}
#socials {
order: 3;
background-color: yellow;
position: relative;
padding: 0px 70px;
align-self: center;
}
.nav-link {
color: white;
font-size: large;
padding: 10px 10px;
align-self: center;
}

<header id="header">
<nav id="navbar">
<div id="logo-stuff">
<img src="https://i.ibb.co/GMSp6tR/Pngtree-blue-assassin-esports-logo-for-4295380.png" alt="" id="logo-img">
<h1 id="logo-text">Gaming Den</h1>
</div>
<div id="links">
<a href="#home" class="nav-link">Home</a>
<a href="#whyus" class="nav-link" id="whyus">Why us</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<div id="socials">Socials</div>
</nav>
</header>