为什么菜单不显示与代码相同的行？

Question

我想使菜单与文字徽标保持一致。当我写菜单时，将其放下而不与徽标对齐。有人可以帮我吗？

nav{
    width: 1330px;
    margin: 0px auto;
}

nav ul li{
    text-transform: uppercase;
    display: inline-block;
    color: white;
    float: right;
    margin-right: 10px;
}

<nav>
          <ul>
           <li><a href="#">Despre noi</a></li>
           <li><a href="#">Servicii</a></li>
            <li><a href="#">Cere ofertă</a></li>
          </ul>

        </nav>

Answer 1

.logo-cont {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     padding: 50px 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

 .logo-cont a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     text-decoration: none;
}
 .logo-cont a .logo {
     width: 50px;
     height: 50px;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     background-image: url(../res/imgs/logo.svg);
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     margin-right: 20px;
}
 .logo-cont a .logo-text {
     font-size: 28px;
     color: #E9DFF7;
     font-weight: 800;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
}
 .logo-cont a .logo-text .logo-dot {
     width: 8px;
     height: 8px;
     background-color: #8E3BEB;
     border-radius: 100%;
     margin-left: 3px;
     -webkit-transform: translateY(-5px);
     transform: translateY(-5px);
}

<div class="logo-cont"></div>

Answer 2

我想您正在寻找类似的东西

nav{
 width: 1330px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

nav ul li{
 text-transform: uppercase;
 display: inline-block;
 color: white;
 margin-right: 10px;
}

<nav>
 <span class="logo">Logo</span>
 <ul>
  <li><a href="#">Despre noi</a></li>
  <li><a href="#">Servicii</a></li>
  <li><a href="#">Cere ofertă</a></li>
 </ul>
</nav>