导航栏元素下降到第二行而不是紧贴其他元素答案

【问题标题】：Navbar Element drops to second line instead of clinging with others导航栏元素下降到第二行而不是紧贴其他元素
【发布时间】：2022-01-20 18:02:15
【问题描述】：

.NavbarA {
  color: #bb9770;
  float: left;
}

.navbar {
    padding: 10px;
    margin: 0 auto;
    border: 1px solid #bb9770;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
    background-color: #ffdab9;
  }
  
  .navbar .links {
    margin-left: auto;
    float: right;
    flex-wrap: nowrap;
    margin-top: 3px;
    align-content: center;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  .navbar a {
    margin-left: 16px;
    text-decoration: none;
    color: #bb9770;
    position: relative;
    padding: 10px;
    margin-bottom: auto;
    font-weight: bolder;
  }
  
  .navbar a:hover {
    color: white;
  }
  
  .navbar a::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  .navbar a:hover::before {
    transform: scaleX(1);
    transform: scaleY(2);
    transform-origin: bottom left;
  }
  
  .navbar a::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: #ffdab9;
    z-index: -1;
    transition: transform .3s ease;
  }
  
  @media(max-width: 800px) {
    .navbar .links {
      display: none;
      visibility: hidden;
    }}

^^^ CSS

const Navbar = () => {
  return (
    <nav className="navbar">
      <h2 className="NavbarA">A</h2>
      <div className="links">
        <a href="/">Home</a>
        <a href="/Sample">Sample</a>
        <a href="/staff">Staff</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        <a href="/donate">Donate</a>
        <a href="/gallery">Gallery</a>
        <a href="/preorder">Preorder</a>
      </div>
    </nav>
  );
};

export default Navbar;

所以我有一个导航栏，我试图将项目对齐在一行中，但由于某种原因，正如您在图片中看到的那样，预购选项卡位于底部，我不希望它在那里，但我无法以某种方式修复它？如果我向导航栏添加任何新内容，一切都保持不变，但无论我添加多少个 nabber 项目（不超过一个项目下降），总会有 1 个项目下降到第二行。我正在使用 react 来编写 js 代码。我粘贴了上面的css和js。请帮忙。

【问题讨论】：

标签： javascript css reactjs navigation navbar

【解决方案1】：

.navbar .links {
    float: right;
    flex-wrap: nowrap;
    white-space: nowrap
    /* white space makes it so the navbar does not come down again */
  }

这基本上是我解决问题的方法。添加部分 white-space: nowrap;使导航栏不会转到第二行。

【讨论】：