как в одну строку сделать данное меню?

Question

Вот мой код html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
</head>

<body>
<div class="header">
  <div class="menu">
    <div class="menu-main">
      <a href="#">Одежда</a>
      <a href="#">Обувь</a>
      <a href="#">Аксессуары</a>
      <a href="#">Новинки</a>
    </div>
    <div class="account-holder">
      <ul class="menu-secondary">
        <li class="sing-auth"> Войти/Регистрация</li>
        <li class="search"> поиск</li>
        <li class="cart">Корзина</li>
      </ul>
    </div>
    <div class="wrap-logo">
      <a class="logo" href="/" title="Интернет магазин модной брендовой мужской одежды">CORNERY</a>            
    </div>        
  </div>     
</div> 
</body>
</html>

вот мой css:

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.header{
    background: rgba(250, 240, 240, 0.747);
    width: 100%; /* Full width */
    position: fixed;
    margin: 0px;
    font-family: 'Nunito', sans-serif;              
}

.menu{
    margin: 0;       
    display: inline;   
}
.menu-secondary >li{
    list-style-type:none;
}

Вот мой результат

какой результат я хочу

Answer 1

Пример

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header {
  background: rgba(250, 240, 240, 0.747);
  width: 100%;
  /* Full width */
  position: fixed;
  margin: 0px;
  font-family: 'Nunito', sans-serif;
}

.menu {
  margin: 0;
  justify-content: space-between;
}

.menu,
.menu-secondary {
  display: flex;
  align-items: center;
}

.menu-secondary>li {
  list-style-type: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="menu">
      <div class="menu-main">
        <a href="#">Одежда</a>
        <a href="#">Обувь</a>
        <a href="#">Аксессуары</a>
        <a href="#">Новинки</a>
      </div>
      <div class="wrap-logo">
        <a class="logo" href="/" title="Интернет магазин модной брендовой мужской одежды">CORNERY</a>
      </div>
      <div class="account-holder">
        <ul class="menu-secondary">
          <li class="sing-auth"> Войти/Регистрация</li>
          <li class="search"> поиск</li>
          <li class="cart">Корзина</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

как в одну строку сделать данное меню?

Ответы (1 шт):